[英]Remove background from Canvas image
When I upload any image to the canvas tag I wish I could remove the background around the logo.当我将任何图像上传到 canvas 标签时,我希望我可以删除徽标周围的背景。 This is my code:这是我的代码:
jQuery 1.12.4 and jQuery UI 1.9.2 used使用 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>
Expected result when I click on the function: The background of the image is removed and only the logo remains visible.单击 function 时的预期结果:图像的背景被移除,只有徽标仍然可见。
Current result: When I click on the function the entire image is removed当前结果:当我单击 function 时,整个图像被删除
Where is the issue?问题出在哪里?
This is an little example of work that i would:这是我会做的一个小例子:
http://jsfiddle.net/loktar/BtbSM/ http://jsfiddle.net/loktar/BtbSM/
Another example:另一个例子:
Image loaded with background加载有背景的图像
When clicked, the image must be without background单击时,图像必须没有背景
With the given image, you need to keep the blue part and remove the gray part对于给定的图像,您需要保留蓝色部分并删除灰色部分
You can safely remove all the pixel whose red channel is greater than 10
, so this part of the code becomes您可以安全地移除所有红色通道大于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;
}
}
of course this script can't work with other images with different colours because the information about it is hardcoded.当然,这个脚本不能处理其他颜色不同的图像,因为它的信息是硬编码的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.