todataurl

Fabric.js manipulate Image object pixel by pixel to change color

生来就可爱ヽ(ⅴ<●) 提交于 2021-01-20 13:33:12
问题 I want to get the data of an image of a fabric.Image object to loop through each pixel and change its color if it's a given color to another given color. But I don't want to get the data of the entire canvas , only of that specific object. Something like this - changeColor = (object, targetColor, replacementColor) => { data = object.getData(); for(var i = 0, n = data.length; i<n; i+=4){ let r = data[i]; let g = data[i + 1]; let b = data[i + 2]; if(r === targetColor.r && g === targetColor.g &&

“Tainted canvases may not be exported” issue still present after setting cross-origin on S3 bucket

五迷三道 提交于 2020-12-13 05:47:21
问题 The code below should convert html to pdf using html2canvas library and then download it, but it's showing this error: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported The issue is still present after allowing cross-origin on the S3 bucket. html2canvas(document.getElementById('compare'), { scale: window.devicePixelRatio, logging: true, allowTaint:true, onrendered: function (canvas) { var data = canvas.toDataURL(); var docDefinition = { content: [{

Chrome toDataUrl quality param is not effect when export jpeg

妖精的绣舞 提交于 2020-02-06 05:29:14
问题 Use canvas.toDataURL('image/jpeg', 1) in Chrome, the image is lose a little seriously, but in Firefox, It's ok, almost lossless, even use default quality value 0.92. It seems does not working by setting the quality in Chrome. 回答1: It's a known issue and it's due to how chroma subsampling is handled. Chrome do this differently than Firefox and Safari. The latter ones uses 4:4:4 at 1.0 setting while current Chrome doesn't. However, it seem as the latest Canary (version 33) do the same as the

Chrome toDataUrl quality param is not effect when export jpeg

非 Y 不嫁゛ 提交于 2020-02-06 05:28:29
问题 Use canvas.toDataURL('image/jpeg', 1) in Chrome, the image is lose a little seriously, but in Firefox, It's ok, almost lossless, even use default quality value 0.92. It seems does not working by setting the quality in Chrome. 回答1: It's a known issue and it's due to how chroma subsampling is handled. Chrome do this differently than Firefox and Safari. The latter ones uses 4:4:4 at 1.0 setting while current Chrome doesn't. However, it seem as the latest Canary (version 33) do the same as the

threejs canvas todataurl is blank

霸气de小男生 提交于 2020-01-11 09:27:12
问题 Okay, I know that canvas.toDataUrl() will produce an image in png format. However, when I try to get the image from http://threejs.org/examples/#webgl_lines_sphere. All I see is a black image on chrome. To replicate the steps - 1) Open dev console and select the canvas element. 2) canvas = $0 3) context = canvas.getContext('webgl', {preserveDrawingBuffer: true}) 4) img = canvas.toDataUrl() 5) document.write('<img src="'+img+'"/>') The image is blank. However, I tried with a different canvas

Save and load image from client to server with django

末鹿安然 提交于 2020-01-06 10:57:38
问题 Here is how I send data from the client (coffeescript & dajaxice): imageData = canvas.toDataURL("image/png") Dajaxice.draw.saveImage( @saveImage_callback, {'image': imageData } ) Here is how I save my image on the server (taken from this answer) @dajaxice_register def saveImage(request, image): imageData = re.search(r'base64,(.*)', image).group(1) output = open('image.png', 'wb') output.write(imageData.decode('base64')) output.close() I would like to load the image and send it like so:

Save and load image from client to server with django

我的梦境 提交于 2020-01-06 10:54:57
问题 Here is how I send data from the client (coffeescript & dajaxice): imageData = canvas.toDataURL("image/png") Dajaxice.draw.saveImage( @saveImage_callback, {'image': imageData } ) Here is how I save my image on the server (taken from this answer) @dajaxice_register def saveImage(request, image): imageData = re.search(r'base64,(.*)', image).group(1) output = open('image.png', 'wb') output.write(imageData.decode('base64')) output.close() I would like to load the image and send it like so:

Canvas toDataURL() returns blank image

扶醉桌前 提交于 2019-12-25 17:44:27
问题 I'm using glfx.js to edit my image but when I'm trying to get that image's data using the toDataURL() function I get a blank image (width the same size as the original image). The strange thing is that in Chrome the script works perfect. What I want to mention is that the image is loaded in canvas using the onload event: img.onload = function(){ try { canvas = fx.canvas(); } catch (e) { alert(e); return; } // convert the image to a texture texture = canvas.texture(img); // draw and update

Unable to get AJAX's post values (plain Javascript)

佐手、 提交于 2019-12-25 01:46:35
问题 I'm aware that this question was answered in this forum (Unable to get values in POST php web serivce), but both the question and the answer used jQuery and, in my case, I can't use it (no matter why)... So, I have a Javascript file that is intended to make a canvas' "screen capture" (using the "toDataURL()" function) and send it to a PHP file using AJAX. As the data to be sent is really long, I can't use the "GET" method (AJAX returns a 414 error: "URL TOO LONG"), so I need to use "POST". I

What's default image quality in toDataURL?

感情迁移 提交于 2019-12-24 16:27:53
问题 Here is doc for toDataURL : Syntax canvas.toDataURL(type, encoderOptions); Parameters type Optional A DOMString indicating the image format. The default type is image/png. encoderOptions Optional A Number between 0 and 1 indicating image quality if the requested type is image/jpeg or image/webp. If this argument is anything else, the default value for image quality is used. Other arguments are ignored. If this argument is anything else, the default value for image quality is used. Other