When I try to load an image in my node webkit app with the following code:
var canvas = document.getElementById('cytoBkg');
var ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = false;
var map = new Image();
map.src = './maps/map.jpg';
map.onload = function() {
ctx.drawImage(map, 0, 0, map.width, map.height, 0, 0, canvas.width, canvas.height);
console.log(map.width, map.height);
}
the image that is rendered to the canvas is very blurry. After about a minute, the following error comes up in the console:
[7583:7583:0519/153517.738479:ERROR:CONSOLE(0)] "Denying load of chrome-extension://dekacdafkimiiblogellomljhcemdaab/maps/map.jpg. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.", source: chrome-devtools://devtools/bundled/inspector.html?remoteBase=https://chrome-devtools-frontend.appspot.com/serve_file/#691bdb490962d4e6ae7f25c6ab1fdd0faaf19cd0/&dockSide=undocked (0)
How can I make my image load properly? I have tried adding the image to as a web accessible resource in my package.json file, but this did not help.
This issue seems to arise when you set the height and width of the canvas in it's style attribute before drawing the image on the canvas. In the above example, the issue can be remedied by setting:
canvas.width = map.width;
canvas.height = map.height;
after the image's onload event, and removing any css related to the height or width of your canvas.
Related
In localhost, it's works exported div to image, include image over another image. I need create dynamic ID card.
But, the local project its work perfect, but the project online, not worked
I used guillotine for only zoom image and move
My first image template is svg inside div as background image
The name, job, number employee its show
var test = $(".test").get(0);
$('.toCanvas').click(function(e) {
html2canvas(test).then(function(canvas) {
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight);
$('#save').click(function(e) {
let type = 'png'; // image type
w = canvasWidth;
h = canvasHeight;
Canvas2Image.saveAsImage(canvas, w, h, type, 'credencial');
});
});
});
i tried different options, for example, generated image to php, save it, and after download, but the problem its same, locally its work perfectly, but online not working
thanks
I am loading an image through my REST API to my frontend. Now I want to mark specific areas on the image with the help of coordinates. The only idea I have had is to draw the image on a canvas and draw the marked areas on a higher level canvas. Every time I load the picture it gets drawn on the canvas with a different smaller size. I presume it has something to do with the canvas drawing before the image is fully loaded, but I havent figured out yet how to get it to work.
let canvas = document.getElementById('c');
let ctx = canvas.getContext('2d');
let canover = document.getElementById('cover');
let ctxover = canvas.getContext('2d');
let img = new Image();
img.onload = function () {
ctx.drawImage(img, 0, 0);
ctxover.fillRect(0,0,10,10);
ctxover.fillRect(0,20,10,10);
ctxover.fillRect(20,0,10,10);
ctxover.fillRect(20,20,10,10);
}
canvas.width = img.width;
canvas.height = img.height;
canover.width = img.width;
canover.height = img.height;
I've looked at the img.height and img.width and they are often wrong. So I am looking for an easy way to only start the drawing after the image has fully loaded. I've tried working with fetch to get the image and then to draw it, but I couldn't get it right.
You seem to be setting the canvas dimensions before the the onload handler has executed. Try setting the canvas dimensions to the images dimensions in the onload handler.
I'm trying to put a image and text on background image using Canvas/jQuery, but i don't no how to do this. I need to do like this image http://static.catfly.com/quiz/which-friend-should-be-kidnapted-by-aliens/en/cover.jpg
I already tried and found some script for a blog but it's not complete script, it's only made a circle, anyone can help me please?
Here is my script below.
<body onload="displayImage()">
<script type="text/javascript">
//Global variables
var myImage = new Image(); // Create a new blank image.
// Load the image and display it.
function displayImage()
{
// Get the canvas element.
canvas = document.getElementById("myCanvas");
// Make sure you got it.
if (canvas.getContext)
{
// Specify 2d canvas type.
ctx = canvas.getContext("2d");
// When the image is loaded, draw it.
myImage.onload = function() {
// Load the image into the context.
ctx.drawImage(myImage, 0, 0);
// Get and modify the image data.
changeImage();
}
// Define the source of the image.
myImage.src = "https://pbs.twimg.com/profile_image/843519123711803393/pyYe9LFq_400x400.jpg";
}
}
function changeImage()
{
ctx.strokeStyle = "white";
ctx.lineWidth = "100";
ctx.beginPath();
ctx.arc(100, 100, 150, 0, Math.PI * 2, true);
ctx.closePath();
ctx.stroke();
}
</script>
<canvas id="myCanvas" width="200" height="200"></canvas>
</body>
One of the problems is that the canvas is only 200x200 and the line width of the circle is 100, and white, so when drawn it fills most of the canvas (it's also drawn slightly outside the canvas area in this case).
And, the image in question also has a load error which may be the primary cause here (onerror+onabort handlers should always be added).
Simply adjust down the line width, fix the image, and I would also recommend setting the canvas bigger (it can be set using the image size).
In my android application, I have to show the images in thumbnail view with reduced size(100 KB) instead of showing it with original size(1 MB). It helps to improve the performance of my application.
How to implement this compression functionality using Ionic/ Cordova. Could you please provide some suggestion to implement this functionality.
Try this. It should work. But instead of image tag use canvas tag. Put this code in your javascript function for loading image. It compress your image to your desired dimensions.
img = new Image();
img.src = 'example.png'; // your file
img.onload = function(){
var canvas = document.getElementById('outputImage'); // id of your canvas
var ctx = canvas.getContext('2d');
canvas.width=400 // your dimensions
canvas.height=300
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
};
I want to make a screnshot of the wecam video in Chrome beta.
The code only produces a screenshot of a small part of the video, what went wrong?
here the code:
http://jsfiddle.net/N9XKh/
You haven't specified the dimensions of your canvas element so it is being created at the default size (300x150) which is smaller than the dimensions of the video element. As a result, when you draw the video to the canvas the snapshot is being cropped.
I would update the snapshot method to set the canvas width and height to match those of the video element like so:
// create snapschot
function snapshot() {
// set the canvas to the dimensions of the video
canvas.width = video.clientWidth;
canvas.height = video.clientHeight;
ctx.drawImage(video, 0, 0);
document.getElementById("huhu").src = canvas.toDataURL('image/webp');
}
Updated fiddle here.