如何使用 jquery 将动态创建的 img 元素加载到 HTML5 画布中

Posted 2023-03-05

【中文标题】如何使用 jquery 将动态创建的 img 元素加载到 HTML5 画布中

【英文标题】：How to load dynamically created img element with jquery into HTML5 canvas

【发布时间】：2019-01-22 09:31:15

【问题描述】：

我无法在 html5 画布上加载/显示使用 jquery 创建的图像，但是当图像对象被创建为 = new Image();

特别是以这个脚本为例：https://www.html5canvastutorials.com/advanced/html5-canvas-invert-image-colors-tutorial/

但将 img 源替换为：

imageObj.src = 'https://demo.boundlessgeo.com/geoserver/ows?&service=WMS&request=GetMap&layers=nasa%3Abluemarble&styles=&format=image%2Fjpeg&transparent=false&version=1.1.1&width=256&height=256&srs=EPSG%3A3857&bbox=0,2504688.542848655,2504688.5428486555,5009377.085697314';

并添加属性：imageObj.crossOrigin = "Anonymous";

紧接着：var imageObj = new Image();

它允许编辑功能运行并且图像在画布上绘制。

但是，通过使用以下jquery创建图像，图像不会显示在画布中，控制台也不会报错：

var imageObj = $("<img />",
 
crossOrigin: "Anonymous", 
src: "https://demo.boundlessgeo.com/geoserver/ows?&service=WMS&request=GetMap&layers=nasa%3Abluemarble&styles=&format=image%2Fjpeg&transparent=false&version=1.1.1&width=256&height=256&srs=EPSG%3A3857&bbox=0,2504688.542848655,2504688.5428486555,5009377.085697314"  
);

我是错过了将 img 绑定到文档的步骤还是其他什么？

【参考方案1】：

为了更改示例代码中的图像创建，您忘记了加载事件。因此，您的代码应该是：

var imageObj = $("<img />", 
    crossOrigin: "Anonymous",
    src: "https://demo.boundlessgeo.com/geoserver/ows?&service=WMS&request=GetMap&layers=nasa%3Abluemarble&styles=&format=image%2Fjpeg&transparent=false&version=1.1.1&width=256&height=256&srs=EPSG%3A3857&bbox=0,2504688.542848655,2504688.5428486555,5009377.085697314"
).on('load', function (e) 
    drawImage(this);
);

var imageObj = $("<img />", 
    crossOrigin: "Anonymous",
    src: "https://demo.boundlessgeo.com/geoserver/ows?&service=WMS&request=GetMap&layers=nasa%3Abluemarble&styles=&format=image%2Fjpeg&transparent=false&version=1.1.1&width=256&height=256&srs=EPSG%3A3857&bbox=0,2504688.542848655,2504688.5428486555,5009377.085697314"
).on('load', function (e) 
    drawImage(this);
);


function drawImage(imageObj) 
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var x = 69;
    var y = 50;

    context.drawImage(imageObj, x, y);

    var imageData = context.getImageData(x, y, imageObj.width, imageObj.height);
    var data = imageData.data;

    for (var i = 0; i < data.length; i += 4) 
        // red
        data[i] = 255 - data[i];
        // green
        data[i + 1] = 255 - data[i + 1];
        // blue
        data[i + 2] = 255 - data[i + 2];
    

    // overwrite original image
    context.putImageData(imageData, x, y);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myCanvas"  ></canvas>

【讨论】：

是的，这行得通！为了我的理智，原始代码是这样的： imageObj.onload= function() drawImage(this);;那么为什么它没有触发呢？

那么，“加载”部分可以分开吗？我问的原因是因为在画布上绘图之前，我需要添加更多功能，按顺序运行。谢谢！

是的，但是就像你可以看到负载部分本身很短......你可以创建一个带有参数（url）的函数......希望这会有所帮助你。

谢谢！它帮助很大。