Blob: почему по ссылке нету файла?

Question

[Isaac Clark]

Привет всем.
Пытаюсь сделать crop изображения.
Есть следующий код

<div style='display: none;'>
<img id="scream" width="220" height="277" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" alt="The Scream">

</div>
<p>Canvas:</p>
<canvas id="myCanvas" width="1600" height="74" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

const c = document.getElementById("myCanvas");

window.addEventListener("load", () => {
   const ctx = c.getContext("2d");
   const img = document.getElementById("scream");
   ctx.drawImage(img, 0, 0);
});

c.toBlob(function (blob) {
  console.log( URL.createObjectURL(blob)) // ссылка на урезанное изображение
}, 'image/jpg');

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

Comments

[jamtuson]

Изображения еще нет, как мне кажется.
Попробуйте так:

img.onload = function() {
   ctx.drawImage(img, 0, 0);
}

[Isaac Clark]

jamtuson, вы имеете в виду, так?

const c = document.getElementById("myCanvas");
    

//window.addEventListener("load", () => {

    const ctx = c.getContext("2d");
    const img = document.getElementById("scream");

  img.onload = function() {
   ctx.drawImage(img, 0, 0);
    
    c.toBlob(function (blob) {
      console.log( URL.createObjectURL(blob)) // ссылка на урезанное изображение
    }, 'image/jpg');

  }


   // ctx.drawImage(img, 0, 0);
// });

Так console.log вообще не выводится...

[jamtuson]

Isaac Clark, скопировал ваш код с поста. Все работает.

[RAX7]

Isaac Clark, blob нужно использовать как урл картинки

url = URL.createObjectURL(blob);
someImage.src = url;

я же тебе в предыдущем твоем вопрос написал как картинку на канвасе обрезать
https://jsfiddle.net/RAX7/s542gdxe/

[Isaac Clark]

jamtuson, console.log не выводится. у Вас выводится?

[jamtuson]

Isaac Clark, blob:null/f3055b7c-6efc-42a5-95a4-e263d488a303
в консольке

[Isaac Clark]

RAX7, выдает ошибку при подгрузке другого изображения

Access to image at  from origin 'https://fiddle.jshell.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

[RAX7]

Isaac Clark, так и у тебя будет такая же ошибка, почитай про CORS https://developer.mozilla.org/en-US/docs/Web/HTML/... и поймешь в какую сторону копать

[Isaac Clark]

RAX7, решил использовать библиотеку. Пожалуйста, подскажите
https://github.com/DominicTobias/react-image-crop#...
тут пример, где нужно загружать файл руками и руками выбирать выделенную область.
https://codesandbox.io/s/72py4jlll6
Подскажите , как сделать, чтоб можно было сразу передать путь к картинке и координаты и размеры выделенной области?

[RAX7]

Isaac Clark, я в реакт не умею, но судя по всему тебе нужно это https://github.com/DominicTobias/react-image-crop#...