Question

我有两个代码：

1st：允许我在上传图片后立即对其进行绘制。
2nd：使用画布以黑白方式绘制图片。

我要绘制黑白图像，谢谢：）

第一个代码

var dz_cart_f_photo = document.getElementById('dz_cart_f_photo');
dz_cart_f_photo.addEventListener('change', handleImage, false);
var canvas = document.getElementById('dz_fcart_f_canvas');
var ctx = canvas.getContext('2d');
function handleImage(e) {
  var reader = new FileReader();
  reader.onload = function(event) {
    var img = new Image();
    img.onload = function(){ ctx.drawImage(img, 0, 0); }
    img.src = event.target.result;
  }
  reader.readAsDataURL(e.target.files[0]);     
}

第二个代码

function drawImage(imageObj) {
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var x = 69;
  var y = 50;

  context.drawImage(imageObj, x, y);

  var imageData = context.getImageData(x, y, imageObj.width, imageObj.height);
  var data = imageData.data;

  for(var i = 0; i < data.length; i += 4) {
    var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
    // red
    data[i] = brightness;
    // green
    data[i + 1] = brightness;
    // blue
    data[i + 2] = brightness;
  }

  // overwrite original image
  context.putImageData(imageData, x, y);
}

var imageObj = new Image();
imageObj.onload = function() {
  drawImage(this);
};
imageObj.src = '88bee903c59cb3eb1d42453f1eaa2ca2.png';

Answer 1

这就是我要做的：

我不知道如何设置画布的宽度和高度。在我的代码中，我有：

canvas.width = img.width;
canvas.height = img.height;

使画布的大小与上载的图像相同。或者，您可以执行以下操作：

canvas.width = img.width + x;
canvas.height = img.height + y;

x和y代表您在开头定义的偏移量。

//the canvas
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = 69;
var y = 50;

// the input type="file" event listener
dz_cart_f_photo.addEventListener('change', handleImage, false);

function handleImage() {
  var file = dz_cart_f_photo.files[0];
  var reader = new FileReader();

  reader.addEventListener(
    "load",
    function() {
      var img = new Image();
      img.src = reader.result;
      img.onload = function() {
        // set the canvas.width and canvas.height
        canvas.width = img.width;
        canvas.height = img.height;
        drawImage(img);
      };
    },
    false
  );

  if (file) {
    reader.readAsDataURL(file);
  }
}

function drawImage(imageObj) {
  context.drawImage(imageObj, x, y);

  var imageData = context.getImageData(x, y, imageObj.width, imageObj.height);
  var data = imageData.data;

  for (var i = 0; i < data.length; i += 4) {
    var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
    // red
    data[i] = brightness;
    // green
    data[i + 1] = brightness;
    // blue
    data[i + 2] = brightness;
  }

  // overwrite original image
  context.putImageData(imageData, x, y);
}

<p><input type="file" id="dz_cart_f_photo"></p>
<canvas id="myCanvas"></canvas>

我希望对您有帮助

Answer 2

function preview(file){
  if (file) {
      var reader = new FileReader()
      reader.readAsDataURL(file);
      reader.onloadend = function () { 
        document.getElementById("img").src = reader.result;
        document.getElementById("img").style.filter = "grayscale(100%)"
      }
   }
}

<input type="file" accept="image/*" onchange="preview(this.files[0])"/>
<br>
<img id="img"/>

以黑白方式绘制图像（在画布中）上传图像

2 个答案: