Tôi muốn lưu canvas của tôi vào một img. Tôi có chức năng này:

function save() {
    document.getElementById("canvasimg").style.border = "2px solid";
    var dataURL = canvas.toDataURL();
    document.getElementById("canvasimg").src = dataURL;
    document.getElementById("canvasimg").style.display = "inline";
}

Nó cho tôi lỗi:

Uncaught SecurityError: Không thể thực thi 'toDataURL' trên 'HTMLCanvasEuity': Canvas canvas bị nhiễm độc có thể không được xuất.

Tôi nên làm gì?

Vì lý do bảo mật, ổ đĩa cục bộ của bạn được khai báo là "tên miền khác" và sẽ làm mờ khung vẽ.

(Đó là vì thông tin nhạy cảm nhất của bạn có khả năng trên ổ đĩa cục bộ của bạn!).

Trong khi thử nghiệm, hãy thử các cách giải quyết này:

• Đặt tất cả các tệp liên quan đến trang (.html, .jpg, .js, .css, v.v.) trên máy tính để bàn của bạn (không phải trong các thư mục phụ).

• Đăng hình ảnh của bạn lên một trang web hỗ trợ chia sẻ tên miền chéo (như dropbox.com). Hãy chắc chắn rằng bạn đã đặt hình ảnh của mình vào thư mục chung của dropbox và cũng đặt cờ gốc chéo khi tải xuống hình ảnh (var img = new Image (); img.crossOrigin = "nặc danh" ...)

• Cài đặt máy chủ web trên máy tính phát triển của bạn (cả máy chủ web IIS và PHP đều có phiên bản miễn phí hoạt động độc đáo trên máy tính cục bộ).

Trong thẻ img, đặt crossorigin thành Ẩn danh.

<img crossorigin="anonymous"></img>

Nếu ai đó xem câu trả lời của tôi, bạn có thể trong tình trạng này:

1. Cố gắng lấy ảnh chụp màn hình bản đồ trong canvas bằng openlayers (phiên bản> = 3)
2. Và xem ví dụ về xuất bản đồ
3. Sử dụng ol.source.XYZ để hiển thị lớp bản đồ

Chơi lô tô!

Sử dụng ol.source.XYZ.crossOrigin = 'Ẩn danh' để giải quyết sự nhầm lẫn của bạn. Hoặc thích mã sau đây:

     var baseLayer = new ol.layer.Tile({
         name: 'basic',
         source: new ol.source.XYZ({
             url: options.baseMap.basic,
             crossOrigin: "Anonymous"
         })
     });

Nếu bạn đang sử dụng ctx.drawImage()chức năng, bạn có thể làm như sau:

var img = loadImage('../yourimage.png', callback);

function loadImage(src, callback) {
    var img = new Image();

    img.onload = callback;
    img.setAttribute('crossorigin', 'anonymous'); // works for me

    img.src = src;

    return img;
}

Và trong cuộc gọi lại của bạn, bây giờ bạn có thể sử dụng ctx.drawImagevà xuất nó bằng cách sử dụngtoDataURL

Trong trường hợp của tôi, tôi đã vẽ lên một thẻ vải từ video. Để giải quyết lỗi canvas bị nhiễm bẩn, tôi phải làm hai việc:

<video id="video_source" crossorigin="anonymous">
    <source src="http://crossdomain.example.com/myfile.mp4">
</video>

• Đảm bảo tiêu đề Kiểm soát truy cập-Cho phép-Xuất xứ được đặt trong phản hồi nguồn video (thiết lập đúng của crossdomain.example.com)
• Đặt thẻ video thành crossorigin = "nặc danh"

Có vẻ như bạn đang sử dụng một hình ảnh từ một URL chưa đặt tiêu đề Access-Control-Allow-Origin chính xác và do đó xảy ra sự cố .. Bạn có thể tìm nạp hình ảnh đó từ máy chủ của mình và lấy nó từ máy chủ của mình để tránh các sự cố CORS ..

Tôi đã giải quyết vấn đề bằng cách sử dụng useCORS: truetùy chọn

 html2canvas(document.getElementsByClassName("droppable-area")[0], { useCORS:true}).then(function (canvas){
        var imgBase64 = canvas.toDataURL();
        // console.log("imgBase64:", imgBase64);
        var imgURL = "data:image/" + imgBase64;
        var triggerDownload = $("<a>").attr("href", imgURL).attr("download", "layout_"+new Date().getTime()+".jpeg").appendTo("body");
        triggerDownload[0].click();
        triggerDownload.remove();
    });

Kiểm tra [hình ảnh được bật CORS] [1] từ MDN. Về cơ bản, bạn phải có một máy chủ lưu trữ hình ảnh với tiêu đề Access-Control-Allow-Origin thích hợp.

<IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
        <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
            SetEnvIf Origin ":" IS_CORS
            Header set Access-Control-Allow-Origin "*" env=IS_CORS
        </FilesMatch>
    </IfModule>
</IfModule>

Bạn sẽ có thể lưu những hình ảnh đó vào DOM Storage như thể chúng được phục vụ từ miền của bạn nếu không bạn sẽ gặp phải vấn đề bảo mật.

var img = new Image,
    canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d"),
    src = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"; // insert image url here

img.crossOrigin = "Anonymous";

img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage( img, 0, 0 );
    localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") );
}
img.src = src;
// make sure the load event fires for cached images too
if ( img.complete || img.complete === undefined ) {
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
    img.src = src;
}

Cũng giống như bản dựng trên @ markE's answer nếu bạn muốn tạo một máy chủ cục bộ. Bạn sẽ không gặp lỗi này trên máy chủ cục bộ.

Nếu bạn đã cài đặt PHP trên máy tính của mình:

1. Mở terminal / cmd của bạn
2. Điều hướng vào thư mục chứa các tập tin trang web của bạn
3. Trong khi trong thư mục này, hãy chạy lệnh php -S localhost:3000← Lưu ý viết hoa 'S'
4. Mở trình duyệt của bạn và trong thanh URL, truy cập localhost: 3000 . Trang web của bạn nên được chạy ở đó.

hoặc là

Nếu bạn đã cài đặt Node.js trên máy tính của mình:

1. Mở terminal / cmd của bạn
2. Điều hướng vào thư mục chứa các tập tin trang web của bạn
3. Trong khi trong thư mục này, chạy lệnh npm init -y
4. Chạy npm install live-server -ghoặc sudo npm install live-server -gtrên máy mac
5. Chạy live-servervà nó sẽ tự động mở ra một tab mới trong trình duyệt khi trang web của bạn mở.

Lưu ý: hãy nhớ có tệp index.html trong thư mục gốc của thư mục của bạn nếu không bạn có thể gặp một số vấn đề.

Tôi cũng đã giải quyết lỗi này bằng cách thêm useCORS : true,vào mã của mình như -

html2canvas($("#chart-section")[0], {
        useCORS : true,
        allowTaint : true,
        scale : 0.98,
        dpi : 500,
        width: 1400, height: 900
    }).then();