使用 Javascript 从图像中删除文本?
Using Javascript to remove the text from the image?
使用 cropper.js 我可以 crop/resize 图片,但是有没有什么办法可以,例如,从图片中删除文本?或绘图?然后保存还是下载?
感谢您的帮助
https://jsfiddle.net/dalinhuang/dsh33tu8/
$('#edit_img').click(function(){
$('#image').cropper({
aspectRatio: 'auto',
crop: function(e) {
}
});
});
$("#reset").click(function() {
$('#image').cropper("reset");
});
/* Limit image width to avoid overflow the container */
img {
max-width: 100%; /* This rule is very important, please do not ignore this! */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/cropper/3.0.0/cropper.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/3.0.0/cropper.min.js"></script>
<button id="edit_img">EDIT IMG</button><br><br>
<button id="reset">RESET</button><br><br>
<div>
<img id="image" src="https://s3.amazonaws.com/dev-resized-image/full/dad3b2b5-1d74-4277-8ee7-fc11196a508c/funny-that-look-pictures-lol.jpg">
</div>
经过几天的搜索终于找到了。
原来这是最好的。使用 Adobe API 编辑图像!!!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Load Feather code -->
<script type="text/javascript" src="https://dme0ih8comzn4.cloudfront.net/imaging/v3/editor.js"></script>
<!-- Instantiate Feather -->
<script type='text/javascript'>
var featherEditor = new Aviary.Feather({
apiKey: 'your-api-key-here',
theme: 'dark', // Check out our new 'light' and 'dark' themes!
tools: 'all',
appendTo: '',
onSave: function(imageID, newURL) {
var img = document.getElementById(imageID);
img.src = newURL;
},
onError: function(errorObj) {
alert(errorObj.message);
}
});
function launchEditor(id, src) {
featherEditor.launch({
image: id,
url: src
});
return false;
}
</script>
<div id='injection_site'></div>
<!-- Add an edit button, passing the HTML id of the image and the public URL of the image -->
<p><input type='image' src='http://images.aviary.com/images/edit-photo.png' value='Edit photo' onclick="return launchEditor('image1', 'https://i.imgflip.com/ehl86.jpg');" /></p>
<img id='image1' src='https://i.imgflip.com/ehl86.jpg'/>
使用 cropper.js 我可以 crop/resize 图片,但是有没有什么办法可以,例如,从图片中删除文本?或绘图?然后保存还是下载?
感谢您的帮助
https://jsfiddle.net/dalinhuang/dsh33tu8/
$('#edit_img').click(function(){
$('#image').cropper({
aspectRatio: 'auto',
crop: function(e) {
}
});
});
$("#reset").click(function() {
$('#image').cropper("reset");
});
/* Limit image width to avoid overflow the container */
img {
max-width: 100%; /* This rule is very important, please do not ignore this! */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/cropper/3.0.0/cropper.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/3.0.0/cropper.min.js"></script>
<button id="edit_img">EDIT IMG</button><br><br>
<button id="reset">RESET</button><br><br>
<div>
<img id="image" src="https://s3.amazonaws.com/dev-resized-image/full/dad3b2b5-1d74-4277-8ee7-fc11196a508c/funny-that-look-pictures-lol.jpg">
</div>
经过几天的搜索终于找到了。
原来这是最好的。使用 Adobe API 编辑图像!!!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Load Feather code -->
<script type="text/javascript" src="https://dme0ih8comzn4.cloudfront.net/imaging/v3/editor.js"></script>
<!-- Instantiate Feather -->
<script type='text/javascript'>
var featherEditor = new Aviary.Feather({
apiKey: 'your-api-key-here',
theme: 'dark', // Check out our new 'light' and 'dark' themes!
tools: 'all',
appendTo: '',
onSave: function(imageID, newURL) {
var img = document.getElementById(imageID);
img.src = newURL;
},
onError: function(errorObj) {
alert(errorObj.message);
}
});
function launchEditor(id, src) {
featherEditor.launch({
image: id,
url: src
});
return false;
}
</script>
<div id='injection_site'></div>
<!-- Add an edit button, passing the HTML id of the image and the public URL of the image -->
<p><input type='image' src='http://images.aviary.com/images/edit-photo.png' value='Edit photo' onclick="return launchEditor('image1', 'https://i.imgflip.com/ehl86.jpg');" /></p>
<img id='image1' src='https://i.imgflip.com/ehl86.jpg'/>