[英]Remove background from Canvas image
当我将任何图像上传到 canvas 标签时,我希望我可以删除徽标周围的背景。 这是我的代码:
使用 jQuery 1.12.4 和 jQuery UI 1.9.2
<canvas id="canvas" class="resize" style="width:200px;height:200px;"></canvas>
<input type="file" id="file-input">
<button id="removeBKG" onclick="removeBKG();">
RIMUOVI SFONDO
</button>
<script>
$(function() {
$('#file-input').change(function(e) {
var file = e.target.files[0],
imageType = /image.*/;
if (!file.type.match(imageType))
return;
var reader = new FileReader();
reader.onload = fileOnload;
reader.readAsDataURL(file);
});
function fileOnload(e) {
var $img = $('<img>', { src: e.target.result });
$img.load(function() {
var canvas = $('#canvas')[0];
var context = canvas.getContext('2d');
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
context.drawImage(this, 0, 0);
});
}
$(document).mouseup(function(e)
{
var container = $(".ui-wrapper");
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0)
{
$("#canvas").css("border-style","hidden");
$(".ui-resizable-handle").attr("style","visibility: hidden");
} else {
$("#canvas").css("border-style","solid");
$(".ui-resizable-handle").attr("style","visibility: visible");
}
});
window.zindex = 30;
$(".resize").resizable({handles: 'ne, se, sw, nw'});
$(".resize").parent().draggable({
stack: "div"
});
});
function removeBKG(){
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
image = document.getElementById("canvas");
canvas.height = canvas.width = 135;
ctx.drawImage(image,0,0);
var imgd = ctx.getImageData(0, 0, 135, 135),
pix = imgd.data,
newColor = {r:0,g:0,b:0, a:0};
for (var i = 0, n = pix.length; i <n; i += 4) {
var r = pix[i],
g = pix[i+1],
b = pix[i+2];
pix[i] = newColor.r;
pix[i+1] = newColor.g;
pix[i+2] = newColor.b;
pix[i+3] = newColor.a;
}
ctx.putImageData(imgd, 0, 0);
}
</script>
单击 function 时的预期结果:图像的背景被移除,只有徽标仍然可见。
当前结果:当我单击 function 时,整个图像被删除
问题出在哪里?
这是我会做的一个小例子:
http://jsfiddle.net/loktar/BtbSM/
另一个例子:
加载有背景的图像
单击时,图像必须没有背景
对于给定的图像,您需要保留蓝色部分并删除灰色部分
您可以安全地移除所有红色通道大于10
的像素,因此这部分代码变为
for (var i = 0, n = pix.length; i <n; i += 4) {
var r = pix[i];
if(r > 10) {
// overwrite gray pixel with white pixel
pix[i] = pix[i+1] = pix[i+2] = 255;
// alpha channel
pix[i+3] = 255;
}
}
当然,这个脚本不能处理其他颜色不同的图像,因为它的信息是硬编码的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.