I’m getting closer with PNG but am not quite there. Sincerely hope to be able one day to use the full Affinity Suite in professional, distributed contexts. Need to fall back to my old PS CS6 there.)īut I liked the way you handled this, a lot. (With Screenprinting it’s different, but a lot has been said about that in this thread. Well, for these cases I still have the external converter option, so not too bad. Placing into Indesign 2020 as well as 21 shows unwanted effects though: the red one has a dirty, shadowy background, while the blue one, even though looking good in preview.app, imports to a non-transparent rendering in the layout document.Īnd worst about it is that neither can be manipulated colour-wise in Indesign. Using the setting exactly as you showed in your latest post, I drew two new files – the left, red one on a white canvas (then exporting to transparent), and the blue one on a transparent canvas. Thanks again for your efforts! Lots more helpful than what I’m used to elsewhere in the design-software business…Īnyway to me it seems to boil down to a compatibility issue: So the failure to implement the BMP format actually isn’t constrained to Photo but extends to Publisher, as I see it. (Which is what makes BMP so valuable in certain layout instances.) Whereas in Affinity Publisher, I can assign fill colours to both BMP and PNG files, but in both cases it doesn’t replace black but only ADDS the fill, resulting in dirty black with a bit of colour glow, rendering the fill option basically useless. Here is a direct comparison of placed black-on-white BMP and PNG files in both Indesign (left) and Publisher pages (right): While it's plain impossible, in Indesign, to assign a fill colour to a PNG file, assigning fill to the BMP file results in REPLACING all black with the chosen fill colour. While it is right that Affinity Publisher handles PNG files much the same as it handles BMP files (as opposed to Indesign), the bad news is it handles neither of them as it’s supposed to. The relevant comparison is if it works in Affinity PUBLISHER, and here’s what I found: The question wasn’t whether it’s possible to replace a given image fill colour in Affinity Designer. Hope you enjoyed the article.Hi Mark, need to get back to this once more: PNG, therefore you can have transparency :) If you set another image type in the dataURL (such as “image/jpg”) the transparency is lost. Keep in mind the default data url image type is. 0 <= alpha <= 255, therefore if you like to set a percentage you have to calculate (255/ (100/percentage value))įinally you can access the new image data with the toDataURL function and set it to the image The alpha value could be 0 to 255 just like the r,g,b values. and put the imagedata back to the canvas after the manipulation, reset the data A pixel in the imagedata is represented by four values: red, green, blue, alpha (rgba) therefore we have to change every fourth value. We have to access the image data, loop thru all pixels of the image and set the alpha values to the value of our choice. Ok this is the more interesting part of the solution. Var canvas = document.createElement("canvas") Var img = document.getElementById("your-image") Get the canvas’ dataURL, tadaĭoesn’t look too hard, does it? Let’s have a look at a possible implementation! :) Step 1: kids stuffįirst we have to create a canvas element, add it to the document’s body, set the canvas size to the image size (we have a 500×200 img) and add the image to the canvas. Loop thru the image and set px by px the alpha value of your choice 3. Add your image into the canvas element 2. Unfortunately that’s not a solution for this problem, the context’s globalAlpha attribute only works for drawing shapes and lines, but here is a step by step guide how it works on any image: 1. Your first guess about how this works might be “hey, lets set globalAlpha to a value of my choice then draw my image into the canvas and it will work”. I wrote this article because I’ve recently released watermark.js which exactly does that for your images. PNG ) with only the html5 canvas element and some javascript. This article is about how to create transparency in all types of images (.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |