Question

我正在制作一个可以将图片上传到画布的面板。将图片上传到画布并显示后，我想单击该复选框以从上传的图片中删除白色背景。我有点想知道如何删除白色背景但我不知道如何实现它。我想当我点击复选框时，我需要一个循环遍历所有像素并修改组件的函数。请问有人可以帮我这个吗？提前致谢。这是我的JSFiddle。另外，这是我的代码段：

＆＃13;

var canvasN = document.getElementById('myCanvas');
var ctxN = canvasN.getContext('2d');

var fileInput = document.getElementById('imageLoader');
fileInput.addEventListener('change', imageLoader, false);

function imageLoader() {
  img = new Image();
  img.onload = function() {

  var MAX_WIDTH = 240;
  var MAX_HEIGHT = 240;
  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;
    }
  }
  var x = (MAX_WIDTH - width) / 2;
  var y = (MAX_HEIGHT - height) / 2;
  ctxN.clearRect(0, 0, canvasN.width, canvasN.height);
  ctxN.drawImage(img, x, y, width, height);
 }
 img.src = URL.createObjectURL(fileInput.files[0]);
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="file-upload">
  <div class="image-upload-wrap">
    <input class="file-upload-input" style="height: 125px" type='file' id="imageLoader" />
  </div>
</div>

<input type="checkbox" name="whiteback" value="Background"> Remove White Background</input>

<canvas id="myCanvas" width="250" height="250" style=" position: absolute; top: 103px; left: 210px; z-index: 10;"></canvas>

＆＃13;

将图片上传到画布并删除白色背景

0 个答案: