Image src local file in popup window open with Chrome Extension - javascript

I've made a Chrome Extension that:
Takes a screenshot of a website, opens anew window, cuts the image using canvas, and downloads the image. Now I want to display the image so I create an image and set its path to file:///C:/Users/myuser/Downloads/myfile.png.
But the image doesn't show up. I tried removing the "file" or setting a timeout but nothing works, however when I click the image link in the dev console it takes me to the picture and it works.
Here's the code from ´background.js´:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.captureVisibleTab(null, {}, function(image){
var x = window.open();
var cv = x.document.createElement('canvas');
x.document.body.appendChild(cv);
var canvas = x.document.querySelector('canvas');
canvas.width = 928
canvas.height = 490;
var img = new Image();
var code = new Date().getTime();
img.onload = function(){
ctx.drawImage(this, 315, 138, 928, 490, 0, 0, 928, 490);
var toCopy = canvas.toDataURL("image/png");
var link = x.document.createElement('a');
link.download = code + '.png';
link.href = toCopy;
link.click();
setTimeout(function(){
var el = new Image();
el.src = 'file:///C:/Users/myuser/Downloads/'+code+'.png';
x.document.body.appendChild(el);
x.console.log(x.location);
}, 2000);
canvas.parentElement.removeChild(canvas);
}
img.src = image;
var ctx = canvas.getContext('2d');
});
});

Related

problems with image resizing

I'm trying to resize an image which comes from a Quill editor.
I used this links as guides:
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
Resize image with javascript canvas (smoothly)
This is my code:
async handleImageAdded(file, Editor, cursorLocation, resetUploader) {
// Resizing
var img = document.createElement("img");
img.src = URL.createObjectURL(file);
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, 200, 200);
var newFile = await new Promise(resolve => canvas.toBlob(resolve));
document.getElementById("preview").src = URL.createObjectURL(newFile); //check
//Sending data to server
Expected behaviour: will display a resized version of the image which was sent in a file variable. (if I switch newFile to file, everything works just as expected)
Current behaviour: a white rectangle 300x150px
Could you please help me to find what am I missing?
The reason was the absence of image.onload event handler.
This worked for me:
async handleImageAdded(file, Editor, cursorLocation, resetUploader) {
// Resizing
var img = document.createElement("img");
img.src = URL.createObjectURL(file);
var newFile;
const promise = new Promise(resolve => {
img.onload = function (event) {
// Dynamically create a canvas element
var canvas = document.createElement("canvas");
// var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// Actual resizing
ctx.drawImage(img, 0, 0, img.width * 0.5, img.height * 0.5);
canvas.toBlob(blob => {
newFile = blob;
console.log(newFile)
resolve();
});
// Show resized image in preview element
//var dataurl = canvas.toDataURL(file.type);
//document.getElementById("preview").src = dataurl;
}
})
await promise;
//var newFile = await new Promise(resolve => canvas.toBlob(resolve));
document.getElementById("preview").src = URL.createObjectURL(newFile); //check

Convert s3 Image to Canvas

Code:
var myCanvas = document.createElement('canvas');
myCanvas.width = 596;
myCanvas.height = 350;
var ctx = myCanvas.getContext('2d');
var img = new Image();
img.crossOrigin = "Anonymous";
img.src = url;
img.onload = function(){
ctx.drawImage(img,0,0);
};
let dt = myCanvas.toDataURL('image/jpg');
var aLink = document.createElement('a');
aLink.href = dt;
aLink.download = 'fixed_photo.jpg';
aLink.click();
Result:
It Downloads an empty Canvas instead of the image from the url. my guess it has something to do with s3 permission, i am using the getObject of S3 aws-sdk.
Try opening the developer tools in your web browser and check the network tab. It should let you know if the request failed and the status code.

How to fill canvas and add text

I want to fill my canvas with a image (base64-string) and than add a text into the canvas.
Initial idea (javascript browser application): I want to set the base64-string txtb64 (Image) as background image of the canvas and than add the text over it.
downloadtext: function() {
var sign = this.getView().byId("SigId");
var txtb64 = signpad.getSignAsJpeg();
var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d');
var image = new Image();
image.src = txtb64;
image.addEventListener("load", function(event) {
console.log("Ready!");
});
ctx.drawImage(image, 0, 0);
ctx.fillText('My random text', 0, 0);
var dataURL = canvas.toDataURL("image/jpeg");
var image = new Image();
var element = document.createElement('a');
image.src = dataURL;
element.setAttribute('href', image.src);
element.setAttribute('download', 'image');
element.style.display = 'none';
element.click();
},
The problem is I always get a black rectangle as output.
What is wrong with my code, because i can see no error.
It looks like you should put the code needed to download the new image inside the "load" event handler of the image you create. This is needed because the load event could trigger after the code beneath it runs, resulting in an empty image being put onto the canvas.
Also you declare var image = new Image(); twice, which could also be causing issues. Calling one image1 and the other image2 will prevent that.
WARNING Running this snippet triggers a download request.
var data = "data:image/png;base64,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";
var can = document.getElementById('can');
var ctx = can.getContext('2d');
var img = new Image();
img.src = data;
img.addEventListener('load', e =>
{
ctx.drawImage(img, 0, 0);
ctx.fillText('My random text', 100, 100);
var dataURL = can.toDataURL("image/jpeg");
var image = new Image();
var element = document.createElement('a');
image.src = dataURL;
element.setAttribute('href', image.src);
element.setAttribute('download', 'image');
document.body.appendChild(element);
element.click();
});
<canvas width="300" height="300" id="can"></canvas>

Drawing image in canvas in iframe

I have a canvas element in HTML file which i am calling in an <iframe>. The problem is canvas loads some images while ignores others. Even some time the same image doesn't get drawn. I have tried multiple solutions. Path is of local filesystem. The image gets downloaded to the server first and then the script is called. Following is my JS script:
function loadCanvas(e) {
alert(e.getSource().getProperty("sourcePath"));
var path = e.getSource().getProperty("sourcePath");
var source = e.getSource();
alert('source' + source);
var ADFiframe = source.findComponent("if1");
alert('ADFiframe' + ADFiframe);
var iframe = document.getElementById(ADFiframe.getClientId()).firstChild;
alert('iframe' + iframe);
var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;
alert('innerDoc' + innerDoc);
var canvas = innerDoc.getElementById("imageView");
alert('canvas' + canvas);
var context = canvas.getContext('2d');
var img = new Image();
img.src = path;
alert('path' +path);
img.onload = function() {
alert('img.src' + img.src);
alert('Press OK to load your image');
context.drawImage(img, 0, 0, 700, 700);
};
// img.onerror= function(){
// alert('Ooops,Error loading this image');
// };
}

Resize the canvas output image to a specific size (width/height)

I have a big canvas (5000x5000) and I want to take a picture of it and create a thumbnail on client side. I can capture the image using canvas.toDataURL but how do i re-size it? Do i have to create an new $("<canvas></canvas>") element and then put that image inside and run the canvas2.toDataURL(); Can anyone help me with this? I can't get my head around it how to do it.
var canvas = document.getElementById("main");
var ctx = canvas.getContext("2d");
var tumbnail64 = null;
var image = new Image();
image.src = canvas.toDataURL();
image.onload = function() {
$c2 = $("<canvas></canvas>");
$c2[0].width=100;
$c2[0].height=100;
$c2[0].getContext("2d");
$c2[0].drawImage(image, 0, 0,100,100);
tumbnail64 = $c2[0].toDataURL();
};
Something like this should work, given you don't have security restrictions on the original canvas element:
var resizedCanvas = document.createElement("canvas");
var resizedContext = resizedCanvas.getContext("2d");
resizedCanvas.height = "100";
resizedCanvas.width = "200";
var canvas = document.getElementById("original-canvas");
resizedContext.drawImage(canvas, 0, 0, 200, 100);
var myResizedData = resizedCanvas.toDataURL();

Categories

Resources