canvas 相关问题

所以我使用谷歌地图，我得到的图片看起来像这样所以我使用谷歌地图，我得到的图片看起来像这样 <img id="staticMap" src="http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap &markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318 &markers=color:red%7Ccolor:red%7Clabel:C%7C40.718217,-73.998284&sensor=false"> 我需要保存它。我发现了这个： function getBase64FromImageUrl(URL) { var img = new Image(); img.src = URL; img.onload = function() { var canvas = document.createElement("canvas"); canvas.width = this.width; canvas.height = this.height; var ctx = canvas.getContext("2d"); ctx.drawImage(this, 0, 0); var dataURL = canvas.toDataURL("image/png"); alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, "")); }; } 但是我遇到了这个问题：未捕获的安全错误：无法在“HTMLCanvasElement”上执行“toDataURL”：可能无法导出受污染的画布。我搜索了修复方法。我在这里找到了一个示例如何使用 CORS，但我仍然无法将这两段代码结合在一起以使其工作。也许我做错了，有更简单的方法吗？我正在尝试保存这张图片，以便将数据传输到我的服务器。所以也许有人做了类似的事情并且知道如何让 .toDataURL() 在我需要的时候工作？除非谷歌使用正确的 Access-Control-Allow-Origin 标题提供此图像，否则您将无法在画布中使用他们的图像。这是因为没有获得CORS批准。您可以在here阅读更多相关信息，但它本质上意味着：虽然您可以在画布中使用未经 CORS 批准的图像，这样做会污染画布。一旦画布被污染，你就无法更长的时间将数据从画布中拉回。例如，您可以不不再使用画布 toBlob()、toDataURL() 或 getImageData() 方法;这样做会引发安全错误。这可以保护用户不因使用图像而暴露私人数据未经许可从远程网站提取信息。我建议将 URL 传递给您的服务器端语言，然后使用 curl 下载图像。不过要小心消毒！编辑：由于这个答案仍然是公认的答案，你应该查看@shadyshrif的答案，即使用： var img = new Image(); img.setAttribute('crossOrigin', 'anonymous'); img.src = url; 这仅在您拥有正确的权限时才有效，但至少允许您做您想做的事情。只需使用 crossOrigin 属性并传递 'anonymous' 作为第二个参数 var img = new Image(); img.setAttribute('crossOrigin', 'anonymous'); img.src = url; 此方法将防止您从正在访问的服务器收到“Access-Control-Allow-Origin”错误。 var img = new Image(); var timestamp = new Date().getTime(); img.setAttribute('crossOrigin', 'anonymous'); img.src = url + '?' + timestamp; 尝试下面的代码... <img crossOrigin="anonymous" id="imgpicture" fall-back="images/penang realty,Apartment,house,condominium,terrace house,semi d,detached, bungalow,high end luxury properties,landed properties,gated guarded house.png" ng-src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" height="220" width="200" class="watermark"> 就我而言，我使用的是 WebBrowser 控件（强制使用 IE 11），但无法克服该错误。切换到使用 Chrome 的 CefSharp 为我解决了这个问题。我有同样的错误消息。我有一个简单的 .html 文件，当我将文件传递给 Apache 中的 php 时，它起作用了 html2canvas(document.querySelector('#toPrint')).then(canvas => { let pdf = new jsPDF('p', 'mm', 'a4'); pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, 211, 298); pdf.save(filename); }); 我在expo-project中使用'react-native-canvas'，它是一个ios应用程序，当我添加“img.crossOrigin = 'anonymous'”时，它无法在canvas中绘制。 imageUri 是来自相机的 https 或 file:// ，任何人都有想法 clearCanvas(ctx); const img = new CanvasImage(bgCanvasRef.current!); img.crossOrigin = 'anonymous'; console.log('imageUri:', imageUri.length); img.src = imageUri; img.addEventListener('load', () => { console.log('load:', curImageTransform, curImageSize); ctx.drawImage( img, curImageTransform.offsetX, curImageTransform.offsetY, curImageSize.width, curImageSize.height, ); }); 如果来自第 3 方网站的图片没有设置 cors 标头（“access-control-allow-origin”），则永远无法通过 chrome 下载图片文件，即使您使用 setAttribute('crossOrigin', 'anonymous'); 这里有一些建议 hack chrome（使用扩展程序，这只适用于您的机器）通过您站点上运行的服务代理图像。浏览器会将域名视为您的网站。这需要您的服务向第 3 方请求图像。通过使用fabric js我们可以解决IE中的这个安全错误问题。 function getBase64FromImageUrl(URL) { var canvas = new fabric.Canvas('c'); var img = new Image(); img.onload = function() { var canvas1 = document.createElement("canvas"); canvas1.width = this.width; canvas1.height = this.height; var ctx = canvas.getContext('2d'); ctx.drawImage(this, 0, 0); var dataURL = canvas.toDataURL({format: "png"}); }; img.src = URL; }

javascript canvas cors

回答 9 投票 0

在画布后面添加内容

我正在尝试构建一个显示与滚动相关的图像的网页。我能够在画布上显示内容，并且动画效果很好。我无法做的是添加内容 AF...

javascript html css canvas

回答 1 投票 0

d3.js 地图 (<svg>) 自动适应父容器并随窗口调整大小

我正在构建一个仪表板并使用 d3.js 添加一个世界地图，该地图将根据地理位置实时绘制推文。 d3.json() 行中引用的 world.json 文件可在此处下载（它是

css canvas svg d3.js

回答 6 投票 0

canvas 相关问题

最新问题