前提・実現したいこと
blogにおける画像の保護。
画像URLが見えるまでひと手間かかるようにしたい。
■参考
画像の描画にcanvas要素を使う
https://qiita.com/a_haru/items/2b8af48f84432e03f199
発生している問題・エラーメッセージ
iphone,retinaディスプレイにおける描画でボケてしまう。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta name="viewport" content="width=device-width,initial-scale=1"> 5 <meta charset="UTF-8"> 6 <title>画像をダウンロードさせないページサンプル</title> 7</head> 8<body> 9 <img data-img-index="img1"> 10 <img data-img-index="img2"> 11 <img data-img-index="img3"> 12 <img data-img-index="img4"> 13 <img data-img-index="img5"> 14</body> 15</html>
js
1window.addEventListener('DOMContentLoaded', function(){ 2 var images = document.querySelectorAll('img[data-img-index]') 3 var imagePath = { 4 'img1': 'img/01.jpg', 5 'img2': 'img/04.jpg', 6 'img3': 'img/02.jpg', 7 'img4': 'img/03.jpg', 8 'img5': 'img/05.jpg', 9 } 10 var cancelEvent = function (e) { 11 e.preventDefault() 12 } 13 Array.prototype.forEach.call(images, function (elm) { 14 const attr = elm.getAttribute('data-img-index') 15 elm.src = imagePath[attr] 16 elm.onload = function (e) { 17 const canvas = document.createElement('canvas') 18 const imageStyle = document.defaultView.getComputedStyle(elm, '') 19 const ctx = canvas.getContext('2d') 20 const imageWidth = imageStyle.width.replace(/px$/i, '') 21 const imageHeight = imageStyle.height.replace(/px$/i, '') 22 canvas.width = imageWidth 23 canvas.height = imageHeight 24 ctx.drawImage(elm, 0, 0, imageWidth, imageHeight) 25 ctx.scale(0.5, 0.5) 26 elm.parentElement.insertBefore(canvas, elm) 27 elm.parentElement.removeChild(elm) 28 canvas.addEventListener('contextmenu', cancelEvent) 29 canvas.addEventListener('dragstart', cancelEvent) 30 } 31 }) 32})
試したこと
drawimageが原因でボケてしまう記述を見つけ、それ以外の方法をとろうとしたものの、canvasタグへの変換を維持できず、URLが見えてしまう。
試している元画像は2000px。