Блог

Главная - Вопросы по программированию - Данные не работают, когда контекст холста является изображением

Данные не работают, когда контекст холста является изображением

#javascript #html #jquery #css

Вопрос:

я пытался загрузить контекст холста в виде изображения с помощью dataURL() с помощью следующего кода, но по какой-то причине он не работает. Однако, когда я заменяю контекст холста чем-то другим, кроме изображения, это действительно работает, так что можете ли вы сказать, как я могу это исправить

     <a href="#" id="downloader"  >Download!</a>
    <canvas id="canvas"></canvas>

        <script>
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');

            var image = new Image(60, 45); 
        
            image.onload = function () {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                canvas.width = image.naturalWidth;
                canvas.height = image.naturalHeight;
                ctx.drawImage(image, 0, -60);
            } 
            image.src = 'image.png';

            $('#downloader').click(function(){
                $(this).attr('href', document.getElementById('canvas').toDataURL("image/png").replace("image/png", "image/octet-stream"));
                $(this).attr('download', "Picture.png");   

            });
    </script>

Комментарии:

1. Что говорит консоль javascript? (Ctrl-Shit-I открывает инструменты разработки в Chrome-не уверен в других) Звучит так, как будто вы используете изображение, но не используете сервер локального хоста (URL — адрес страницы будет начинаться с файла:/// если это так) Если это будет проблема перекрестного происхождения, то консоль сообщит вам, в чем заключается ошибка. 😉

2. «Неперехваченное исключение DOMException: Не удалось выполнить «toDataURL» на «HTMLCanvasElement»: Испорченные полотна не могут быть экспортированы». вот какую ошибку я получаю. однако на самом деле я не запускаю код на сервере локального хоста, поэтому я попытаюсь запустить его и посмотрю, была ли в этом проблема

3. большое вам спасибо, действительно, в этом и была проблема. теперь это работает!

4. рок-н-ролл.. Похоже, у тебя тоже есть новый набор игрушек, с которыми можно поиграть. Наслаждайтесь инструментами разработки. 🙂

Ответ №1:

Ваш JS должен быть:

 var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var image = new Image(60, 45);

//First add src, then set the height and width
image.src = 'image.png';

image.onload = function() {
  canvas.width = image.width;
  canvas.height = image.height;
  // Draw image from start and not from behind the axis
  ctx.drawImage(image, 0, 0);
}

$('#downloader').click(function() {
  $(this).attr('href', document.getElementById('canvas').toDataURL("image/png"))
  $(this).attr('download', "Picture.png");

});
Метки: ,