Using Javascript to remove the text from the image?

Question

Using cropper.js I could crop/resize the image, but is there any way I could, for example, remove the text from the image? or drawing? Then save or download?

Thanks for any help

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>

Load the image to a canvas, then you can edit the image, and send it back to server to save it. — Teemu, Sep 22 '17 at 16:50
@Teemu I tired this but didn't work, the downloaded img is broken? https://codepen.io/hdl881127/pen/KXgQme — Dalin Huang, Sep 22 '17 at 16:56
The image looks fine in the linked codepen in FF. I mean technically fine = ). — Teemu, Sep 22 '17 at 16:58
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. — Balakrishna Gondesi, Sep 22 '17 at 17:16
https://stackoverflow.com/questions/34840250/tainted-canvases-may-not-be-exported-when-using-drawimage — Balakrishna Gondesi, Sep 22 '17 at 17:27

score -1 · Accepted Answer · answered Sep 27 '17 at 20:58

Finally after few days of searching.

Turns out this is the best. Using Adobe API to edit images!!!

<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'/>

Using Javascript to remove the text from the image?

1 Answers1