Question

我创建了一个图像选择并调整大小（客户端）并上传到服务器。我要求帮助的是iframe中的图像预览（已调整大小），但无法弄清楚。我将仅为此应用程序使用Chrome桌面。 Qusetion请帮我在iframe中显示已调整大小的图片，这里是我的脚本

HTML

<input type="file" input id="input" onchange="ClientSideResize()" name="Image" value="%%%img%%%"/>

HTML iframe

<img src="" id="image">
<iframe name="my_iframe" src="" id="my_iframe" style="visibility: hidden;"></iframe>

SCRIPT

<script>
function ClientSideResize(){
var dataurl = null;
var uniq = 'id' + (new Date()).getTime();
var filesToUpload = document.getElementById('input').files;
var file = filesToUpload[0];

// Create an image
var img = document.createElement("img");
// Create a file reader
var reader = new FileReader();
// Set the image once loaded into file reader
reader.onload = function(e)
{
    img.src = e.target.result;

    img.onload = function () {
        canvas = document.createElement("canvas");
        ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);

        var MAX_WIDTH = 200;
        var MAX_HEIGHT = 400;
        var width = img.width;
        var height = img.height;

        if (width > height) {
          if (width > MAX_WIDTH) {
            height *= MAX_WIDTH / width;
            width = MAX_WIDTH;
          }
        } else {
          if (height > MAX_HEIGHT) {
            width *= MAX_HEIGHT / height;
            height = MAX_HEIGHT;
          }
        }
        canvas.width = width;
        canvas.height = height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, width, height);
        dataurl = canvas.toDataURL("image/jpeg",100);
        var blobBin = atob(dataurl.split(',')[1]);
        var array = [];
        for(var i = 0; i < blobBin.length; i++) {
        array.push(blobBin.charCodeAt(i));
        }
files = new Blob([new Uint8Array(array)], {type: 'image/jpg', name: "Sample"});

    } // img.onload
}
// Load files into file reader
reader.readAsDataURL(file);
}
</script>

Answer 1

在此过程中给你一些其他提示... filereader不是首选方式。而之后构建blob的方式并不好，请直接使用canvas＃toBlob。

function ClientSideResize () {
  // var uniq = 'id' + Date.now() // never used
  var filesToUpload = document.getElementById('input').files
  var file = filesToUpload[0]

  // Create an image
  var img = new Image

  img.onload = () => {
    const MAX_WIDTH = 200
    const MAX_HEIGHT = 400

    var canvas = document.createElement('canvas')
    var ctx = canvas.getContext('2d')
    var width = img.width
    var height = img.height

    // figure out new width and hight while keeping proportionally
    if (width > height) {
      if (width > MAX_WIDTH) {
        height *= MAX_WIDTH / width
        width = MAX_WIDTH
      }
    } else {
      if (height > MAX_HEIGHT) {
        width *= MAX_HEIGHT / height
        height = MAX_HEIGHT
      }
    }

    // set diminsion
    canvas.width = width
    canvas.height = height

    // draw resized image
    ctx.drawImage(img, 0, 0, width, height)

    // get it as a blob
    canvas.toBlob(blob => {
      // Do something with blob
      // let file = new File([blob], 'filename.png', {type: blob.type})
      let iframe = document.querySelector('iframe')
      iframe.contentWindow.postMessage(blob, '*')
    }, 'image/jpeg', 100)
  } // img.onload

  img.src = URL.createObjectURL(file)
}


// on iframe
window.onmessage = event => {
  console.log(event) // will contain your blob object
}

在iframe中预览已调整大小的图像

1 个答案: