画布绘制图像不起作用，根本没有错误

Canvas drawImage is not working, no error at all

本文关键字：有错误 不起作用 图像 布绘制 绘制      更新时间：2023-09-26

这里是代码

       function drawImg() {

                            var canvas = document.getElementById('mask');
                            var context = canvas.getContext('2d');
                            var img = new Image();
                            //alert(img.src);
                            img.src = "http://localhost/photo/webs.png";
                            img.onload = function(){
                                    context.drawImage(img, 100, 100);
                                    var URL = canvas.toDataURL();
                                    document.getElementById('main').src = URL;
                            };

                    }

HTML代码是

         <img id="main" src="main.png" />
         <canvas class="mask" id="mask" width='200' height='200'></canvas>
         <p rel="32,223,95" onclick="drawImg()" title="Green">Green</p>

图像正在加载，已确认。 但不分配给画布。

帆布：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277">
<p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

尝试使用这个：

脚本： 

   function drawImg() {
    var img = new Image();
    //alert(img.src);
    img.src = "home.png";
    console.log(img);
    if(img.complete) { //check if image was already loaded by the browser
           callback(img);
        }else {
           img.onload = callback;
        }

}
var callback = function(img) {
    var canvas = document.getElementById('mask');
    var context = canvas.getContext('2d');
    context.drawImage(img, 100, 100);
       var URL = canvas.toDataURL();
       console.log(URL);
       document.getElementById('main').src = img.src;
    }

.html：

<img id="main" src="main.png" />
         <canvas class="mask" id="mask" width='200' height='200'></canvas>
         <p rel="32,223,95" onclick="drawImg()" title="Green">Green</p>
相关文章：