[英]Canvas - Cannot create image url
我用兩個圖像設置了一個小提琴。 我不明白為什么圖片A)不適合,對我來說,來源看起來與圖片B)的來源相似。
的HTML
A)<img src="http://img.ui-portal.de/uim/Coop/monster-beratung_140x115.jpg" />
B)<img src="http://i0.gmx.net/images/258/18821258,pd=2,h=250,mxh=600,mxw=800,w=480.jpg" />
<h4> Display images above with dataURL as source: </h4>
<div id="converted" ></div>
JS
//create canvas-image from A)
var imgA = new Image();
imgA.crossOrigin = "anonymous";
imgA.src = "http://img.ui-portal.de/uim/Coop/monster-beratung_140x115.jpg";
imgA.onload = function(){
var canvasA = document.createElement('canvas');
canvasA.width = imgA.width;
canvasA.height = imgA.height;
var ctxA = canvasA.getContext('2d');
ctxA.drawImage(imgA, 0, 0);
var imgURl = canvasA.toDataURL();
console.log("die url: "+ imgURl)
$("#converted").append("<img src="+imgURl +" />");
}
//create canvas-image from B)
var imgB = new Image();
imgB.crossOrigin = "anonymous";
imgB.src = "http://i0.gmx.net/images/258/18821258,pd=2,h=250,mxh=600,mxw=800,w=480.jpg";
imgB.onload = function(){
var canvasB = document.createElement('canvas');
canvasB.width = imgB.width;
canvasB.height = imgB.height;
var ctxB = canvasB.getContext('2d');
ctxB.drawImage(imgB, 0, 0);
var imgURl = canvasB.toDataURL();
console.log("die url: "+ imgURl)
$("#converted").append("<img src="+imgURl +" />");
}
第一張圖片受所有者保護。
查看調試器消息
Image from origin 'http://img.ui-portal.de' has been blocked from loading by Cross-Origin
Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the
requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access.
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.