Search the Community
Showing results for tags 'canvasrenderingcontext2d'.
Found 2 results
-
unable to understand why black image is getting, please check the code and assist in generating the optimised image from file input <html> <head> <script src="jquery-3.4.1.min.js"></script> <title>Image Optimization</title> </head> <body> <div> <input type="file" id="imgFile" accept="image/*" capture="user"> </div> <div id ="test"> <img id="optImg" alt="optmisied Image"> </div> </body> </html> <script> $("#imgFile").change(function(){ const File = this.files[0]; const fileURL = URL.createObjectURL(File); const cvs = document.createElement("canvas"); let ctx = cvs.getContext("2d"); const imgFile = new Image(); imgFile.src = fileURL; imgFile.onload = function(){ ctx.drawImage(imgFile,0,0); } const cvsURL = cvs.toDataURL(File.type, 0.3); $("#optImg").attr('src',cvsURL).css('width',80) }); </script> please assist
-
Hello & Thanks , I am getting this error: Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)' on this line: ctx.drawImage(cowpies[i], cowpies[i].x, cowpies[i].y, cowpies[i].width, cowpies[i].height); I got no error msg from the 'onload' . Haven't figured out what I am doing wrong . Pls , take a look .
