What I am doing now is the following:
I am storing the state of a canvas using the toDataURL method and I am also trying to draw it on a canvas using the drawImage method.
Here is a snippet:
var lastState = states[10]; //states is an array that saves all the toDataURL of the canvas
var permCtx = canvas.getContext('2d');
var img = new Image();
img.onload=function(){
permCtx.drawImage(img,0,0);
}
img.src=lastState;
I am getting the following error in the console:
414 (Request-URI Too Large)
Is there a way to draw an image on the canvas using only the toDataURL method?
The mechanism you have used should work; what OS/browser/version are you seeing this error with?
Anyhow, despite the fact that this should work, it is not the most efficient if you are constructing data URLs and then restoring them in the same session. Instead, I would suggest creating a new not-in-DOM canvas to store your state, and use that to draw to the main canvas:
var states = [];
function saveState(ctx){
var c = document.createElement('canvas');
c.width = ctx.canvas.width;
c.height = ctx.canvas.height;
c.getContext('2d').drawImage(ctx.canvas,0,0);
states.push(c);
return c;
}
function restoreState(ctx,idx){
var off = idx==null ? states.pop() : states[idx];
ctx.drawImage(off,0,0);
}
Related
I'm not sure if this CanvasRenderingContext2D.globalCompositeOperation is not really working or working in safari, but I've tested it.
I'm working on a Convert Image to Sketch Image feature using Javascript, and this implementation involves CANVAS API or CanvasRenderingContext2D.globalCompositeOperation to be exact.
To explain the flow, I'm generating two images using the image selected, 1 black and white image, and 1 black and white a with blurred image, and then after, that I'm using this merge function to merge/combine them to have Sketch-drew-image. Check this https://codepen.io/ohyeahhu/pen/RwMVjym, if you are using Chrome of course it will work, but if you are using safari browser the Sketch Image will not work.
The script filter function below is how I convert/generate an Image to a black and white and blurred using CanvasRenderingContext2D.filter in CANVAS API.
Now I know that the CanvasRenderingContext2D.filter doesn't have any support from the safari browser but I've solved that part by using https://github.com/davidenke/context-filter-polyfill thanks to this beautiful suggestion https://stackoverflow.com/a/65843002/17678769
const filter = function(img, filter) {
let canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
let ctx = canvas.getContext('2d');
ctx.filter = filter;
ctx.drawImage(img, 0, 0, img.width, img.height);
return canvas;
}
The script below is the one I'm using to create a sketch-like-image. Now the ctx.globalCompositeOperation = 'color-dodge'; line of code supposed to make the image like a Sketch-drew-image but somehow in Safari browsers mobile devices or mac, it is not working.
const merge = function(front, overlay) {
let canvas = document.createElement('canvas');
canvas.width = front.width;
canvas.height = front.height;
let ctx = canvas.getContext('2d');
ctx.globalCompositeOperation = 'color-dodge';
ctx.drawImage(front, 0, 0, canvas.width, canvas.height);
ctx.drawImage(overlay, 0, 0, canvas.width, canvas.height);
let img = document.createElement('img');
img.src = canvas.toDataURL();
return img;
}
I've read the MDN documentation of CanvasRenderingContext2D.globalCompositeOperation and it says that safari browsers fully supports it.
If that's the case, then I do not know where did I go wrong on this implementation, Did I made a mistake in the implementation? I'm really stuck in this for a day, is there any alternative or solution to this issue/problem?
Yes Safari does support globalCompositeOperation (gCO), they even do have the biggest list of modes they support among all three main browsers (though I found a rendering bug).
The problem lies in your filter polyfill. It probably messed up somewhere when monkeypatching the various methods of the context and broke the gCO (it also broke clearRect).
Seeing how there is no activity on the project I'm not sure you'll be able to have it fixed, but a simple workaround is to let the polyfill know it shouldn't be called on that canvas by setting the __skipFilterPatch property to true on your canvas:
function createCanvas({width, height}) {
return Object.assign(document.createElement("canvas"), { width, height });
}
function filter(source, filters) {
const canvas = createCanvas(source);
const ctx = canvas.getContext("2d");
ctx.filter = filters;
ctx.drawImage(source, 0, 0);
return canvas;
}
(async() => {
const blob = await fetch("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/20141025_Shockwave_Truck_Alliance_Air_Show_2014-3.jpg/640px-20141025_Shockwave_Truck_Alliance_Air_Show_2014-3.jpg").then(resp => resp.blob());
const bmp = await createImageBitmap(blob);
const gray = filter(bmp, "grayscale(1)");
const blur = filter(bmp, "grayscale(1) invert(1) blur(5px)");
const canvas = createCanvas(bmp);
canvas.__skipFilterPatch = true; // the magic
const ctx = canvas.getContext("2d");
ctx.drawImage(gray, 0, 0);
ctx.globalCompositeOperation = "color-dodge";
ctx.drawImage(blur, 0, 0);
document.body.append(canvas);
})().catch(console.error);
<script src="https://cdn.jsdelivr.net/npm/context-filter-polyfill#0.2.4/dist/index.js"></script>
Given an existing browser page with images is there a way to get the bytes from an <img> element using Javascript?
I am not seeing any methods in HTMLImageElement which would allow getting a byte array from the image element.
I have tried the following approach but this returns an empty byte array.
var img = document.querySelector('.my_image');
var body = document.querySelector('body');
var canvas = document.createElement('canvas');
canvas.height = img.height;
canvas.width = img.width;
var context = canvas.getContext('2d');
context.drawImage(img, 0, 0);
body.appendChild(canvas);
var imageBytes = context.getImageData(img.width, img.height, 1, 1).data;
console.log(imageBytes);
The following js code will fetch an image from an existing <img..> element as base64 without re-downloading the image (assuming there is an image with the given selector on the page and that there is no canvas cors violation, which will be the case when you click the Run button below):
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var img = document.querySelector('img');
canvas.height = img.naturalHeight;
canvas.width = img.naturalWidth;
context.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);
var base64String = canvas.toDataURL();
console.log(base64String);
<img src="http://placekitten.com/40/40">
NOTE: Running this code directly from the snippet will fail with an error message indicating a cross-domain violation. If you copy it to your own server then you'll get the base64-encoded content (❗️must not be a file:/// URL). If you can't avoid the cross-domain issue then then you'll need to use #DPardal's solution. It also works on a third-party domain if, for example, you inject the script with something like selenium.
Is there a way to get the bytes from an <img> element using Javascript?
Not really, but you can use fetch():
(async () {
const arrayBuffer = await (await fetch("img-url")).arrayBuffer();
})();
This shouldn't re-download the image because it's still cached.
I've found another contribution on StackOverflow with the same intention.
How to convert image to byte array using javascript only to store image on sql server?
This is the relevant code:
var url;
var canvas = document.createElement("canvas");
var img1=document.createElement("img");
function getBase64Image(){
url = document.getElementById("fileUpload").value;
img1.setAttribute('src', url);
canvas.width = img1.width;
canvas.height = img1.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img1, 0, 0);
var dataURL = canvas.toDataURL("image/png");
alert("from getbase64 function"+dataURL );
return dataURL;
}
I have an image encoded in base64 and I need to draw it on a canvas in a synchronous fashion. Take a look at this code I had:
//convert base64 to actual Image()
var input = new Image();
input.src = dataurl;
//draw on canvas
var w = input.width, h = input.height;
canvas.width = w; canvas.height = h;
ctx.drawImage(input, 0, 0)
This used to work on Chrome. I know it is not a good practice to assuming the browser will be able to finish loading before the next instruction, but it worked. After several updates later, it finally fails.
I cannot listen to the load event because that would make it async, which is not good because that's a generator function and I need to return the canvas synchronously. The program is built around it and making it async would mean complete rewrite. That's not good.
Attempt
input.src = dataurl;
while(!input.width){ /* busy wait */ }
var w = input.width, h = input.height;
Does not work since the browser won't update it before my code finishes executing.
Right now I really can't think of any way to solve this dilemma, so any input is appreciated. (Do note that the datauri is generated from another canvas, which I do have access to.)
It's not possible to draw an image to a canvas before it is loaded, which means waiting to a load event. This means you cannot load a data URI into an DOM image synchronously, so you will need to convert your API to an asynchronous one.
The only other way would be to have a JavaScript-based image decoder that converts the data URI into a ImageData object, which would not be trivial to do and require users to load a lot more code.
There used to be a different hack involving innerHTML that would work, but it too no longer works.
Now-Broken Example:
var base64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJ4AAACeCAYAAADDhbN7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RkE1MTZBNzk1MDE1MTFFNUEzODE5OTE2QTE2M0ExOTYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RkE1MTZBNzg1MDE1MTFFNUEzODE5OTE2QTE2M0ExOTYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDM0YzRTJFODk1NDcxMUU0OUQ3NkI2RkYyOUFBMjg3RCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDM0YzRTJFOTk1NDcxMUU0OUQ3NkI2RkYyOUFBMjg3RCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgtvbosAAAnjSURBVHja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';
var el = document.createElement('p');
el.innerHTML = '<img src="'+base64+'" />';
var input = el.firstChild;
//draw on canvas
var canvas = document.getElementById('canvas');
var w = input.width, h = input.height;
canvas.width = w; canvas.height = h;
var ctx = canvas.getContext('2d');
ctx.drawImage(input, 0, 0);
<canvas id="canvas"></canvas>
Just use Promise to make it async.
return new Promise(resolve => {
image.onload = function () {
ctx.drawImage(input, 0, 0)
resolve('resolved');
}
});
I have a web application that generates images on the fly and then renders (segments of) them on the client using canvas - the general code looks something like this (simplified)...
var width = ...
var height = ...
var img = new Image();
img.onload = function(){ // Set onload before setting image source ;)
var canvas = document.createElement("canvas");
canvas.setAttribute('width',width);
canvas.setAttribute('height',height);
var context = canvas.getContext("2d");
context.drawImage(this,0,0,width,height,0,0,width,height);
}
img.src = ...
In firefox and chrome, this works fine. In IE9 (and sometimes IE10), this sometimes results in a blank image. As a workaround, I put in...
var width = ...
var height = ...
var img = new Image();
img.onload = function(){
var canvas = document.createElement("canvas");
canvas.setAttribute('width',width);
canvas.setAttribute('height',height);
var context = canvas.getContext("2d");
window.setTimeout(function(){
context.drawImage(img,0,0,width,height,0,0,width,height);
}, 10); // 10 millisecond delay here seems to give IE time to make sure the image is actually ready
}
img.src = ...
Obviously, putting in random delays is making me nervous - I would much rather figure out why this happens. Is there another event type / method / property on images that may be used? Could there perhaps be something in the http headers sent down with the images / the encoding / transfer method that is causing this?
Since drawing images on the canvas seems to be something that trips up new users a lot, searches mostly yield instances where the developer set the source before the onload method. The closest other question / reply I was able to find was this : https://stackoverflow.com/a/15186350/470062
Edit:
I have updated the examples to include width and height definitions at the start
Edit 29/Apr/2013:
The 10 millisecond delay is not always sufficient - I have changed the code to check the canvas pixels to determine if anything has been drawn - This feels like such an ugly hack though - I would love to know if there is a better way :
... snip - this is at the end of the image load callback..
if((navigator.appVersion.indexOf("MSIE")) >= 0){
function checkAndRedraw(){
context.clearRect(0,0,width,height);
context.drawImage(img, 0, 0, width, height);
var imageData = context.getImageData(0, 0, width, height),
data = imageData.data,
len = data.length;
for (var i = 0; i < len; i += 4){
if(data[i] || data[i+1] || data[i+2]){
scheduleRedraw = null; // prevent memory leak
return; // A pixel contained some non empty value so something was drawn - done.
}
}
scheduleRedraw();
}
var redrawHackTimeout;
function scheduleRedraw(){
window.clearTimeout(redrawHackTimeout);
redrawHackTimeout = window.setTimeout(checkAndRedraw, 500);
}
scheduleRedraw();
}
//END IE9 Hack
I have the same issue in IE9, what I had to do is this too:
theImage = new Image();
theImage.onload = function() {
that = this;
setTimeout(function() {
that.onload2();
}, 100);
};
theImage.onload2 = function(){
#your old load function code
}
theImage.src = 'http://....';
I don't understand why ie9 triggers load image function when it's not actually loaded or not "usable" yet in a canvas. it makes me pull my hair out.
var img = new Image();
img.src = ...
img.onload = function(){ // Set onload before after setting image source ;)
var canvas = document.createElement("canvas");
canvas.setAttribute('width',width);
canvas.setAttribute('height',height);
var context = canvas.getContext("2d");
context.drawImage(this,0,0,width,height,0,0,width,height);
}
You must set the src, then wait for the image to load.
I am trying to load an image, get the pixel values out of it and store them in an array for later use. The reason for this is that I'm coding a raycaster("fake 3d" engine), where I want to draw walls as columns on the screen with pixel values taken from a texture-image loaded before-hand.
This is the code im using now:
var imgwidth;
var imgheight;
var wallSprite1 = new Image();
wallSprite1.src = "textures/bricks_tile.gif"
if(wallSprite1.complete) findHHandWW();
else wallSprite1.onload = findHHandWW;
function findHHandWW() {
imgwidth = this.width;
imgheight = this.height;
getImageData(this);
return true;
}
function getImageData(img) {
var tempcanvas = document.createElement('canvas');
tempcanvas.height = imgwidth;
tempcanvas.width = imgheight;
var tempcontext = tempcanvas.getContext("2d");
tempcontext.drawImage(img,0,0);
wallData = tempcontext.getImageData(0, 0, imgwidth, imgheight);
}
However, this gives me the following error:
Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
Uncaught Error: SECURITY_ERR: DOM Exception 18
I read about it, and didn't find any real answer to my problem. I want run this locally, for now. Is it even possible? I tried using;
image.crossOrigin = '';
but it didnt work.
Have I gone about this in the wrong way? I wonder if there's an easier way to accomplish what I want.