时间戳

首页 > 解决方案 > 如何使用 jquery 将动态创建的 img 元素加载到 HTML5 画布中

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

问题描述

我无法在 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 绑定到文档的步骤，或者是其他什么？

标签： javascriptjqueryhtmlcanvas

解决方案

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

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" width="578" height="400"></canvas>

推荐阅读