画像URLによって取得した画像をcanvasに描画したい

Question

前提・実現したいこと

外部サイトからコピーした画像URLを、URL入力フォームにペースト → canvasに描画
という機能をhtml,js（できればjQuery）で実装したいです。
下記動作サンプルです。
サンプル

画像の取得方法は画像URLの他に、ファイルをアップロードする方法も実装しています。
アップロードする方法で取得した画像は、下記URLの方法を参考にして、canvasに描画することができました。
canvasにローカル画像を表示

発生している問題

画像URLから取得した画像を、canvasに描画できていないです。

該当のソースコード

現状は下記のコードで、
画像をURLをフォームにペースト → 表示
という機能を実装しています。

$(function () {
  
  //input url
  $('#url').change(function () {
    $('#view_file').fadeOut(1), $('#view_url').fadeIn(1);
    $('#view_url').prop('src', this.value);
    console.log(this.value);
    var url = $('#file')[0];
    url.value = "";
  });

});

上記コードを修正して、canvasに描画したいです。

試したこと

下記コードによってアップロードで取得した画像をcanvasに描画できたので、画像URLから取得用にアレンジしようと試みましたが、いかんせん下記コードも外部サイトから引っ張ってきたものなので細かく理解できておらず、上手くいきませんでした。

$(function () {
  
  //input file
  $('#file').change(function () {
  $('#view_url').fadeOut(1), $('#view_file').fadeIn(1);
  var file = this.files[0];
  var canvas_file = $('#view_file');
  var ctx = canvas_file[0].getContext('2d');
  var image = new Image();
  var fr = new FileReader();
  var url = $('#url')[0];
  url.value = "";
  fr.onload = function (e) {
    image.onload = function () {
    var cnvsH = 240;
    var cnvsW = image.naturalWidth * cnvsH / image.naturalHeight;
    canvas_file.attr('width', cnvsW);
    canvas_file.attr('height', cnvsH);
    ctx.drawImage(image, 0, 0, cnvsW, cnvsH);
    }
    image.src = e.target.result;
  }
  fr.readAsDataURL(file);
  });

});

Comments

[m.ts10806]

ん？できますよ。
「動作サンプル」に提示されたコードですよね？
Chromeであれば画像右クリックで「画像アドレスをコピー」って出てきますけど、それをそのまま貼り付けてchange（例えばタブキーなどでフォーカスを外す）したら、その画像がそのまま表示されます。
これは行いたい動作では？

[m.ts10806]

あ、勘違いしました。
今は単にimgタグに入れてるだけだから、ということですね。失礼しました。

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

Answer 1

<script>
$(function(){
  $('#btn').on('click',function(){
  var url=$('[name=url]').val();
  var img=new Image();
  img.onload=function(e){
    var width= img.width;
    var height= img.height;
    var cnvsH = 50;
    var cnvsW = parseInt(width * cnvsH / height);
    var canvas = document.querySelector('#canvas');
    canvas.setAttribute('width', cnvsW);
    canvas.setAttribute('height', cnvsH);
    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0, cnvsW, cnvsH);
  }
  img.src=url;
  });
});
</script>
<input type="text" name="url" value="https://s.yimg.jp/images/top/sp2/cmn/logo-170307.png">
<input type="button" id="btn" value="view">
<canvas id="canvas" width="0" height="0"></canvas>

Comments

[whoiwhoi]

ありがとうございます！実装できました！

Answer 2

外部サーバからの画像を取得するにはCORSを何とかする必要があり、それなりに面倒です。（相手側のサーバが対応していれば特に問題はないが、普通対応しないので間に自分のサーバをかませるなどする必要がある）

【canvasのCORS制限を突破する | WEB EGG】
https://blog.leko.jp/post/how-to-disable-limitation-of-cors-in-html5-canvas/

【画像とキャンバスをオリジン間で利用できるようにする - HTML: HyperText Markup Language | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/CORS_enabled_image

Comments

[kei344]

> 汚染されたキャンバスで以下の呼び出しを行うと、エラーが発生します。
> キャンバスのコンテキストに対する getImageData() の呼び出し
> <canvas> 要素自身に対する toBlob() の呼び出し
> キャンバスに対する toDataURL() の呼び出し
読み込みは特に問題が無いのか･･･。

[whoiwhoi]

CORSという単語自体知らなかったので勉強になりました。
読込はできましたが保存できるようにもしたいので、引き続き試行錯誤します。