2017-09-22 11 views
0

cropper.jsを使って画像をトリミング/サイズ変更することはできますが、画像からテキストを削除するなどの方法はありますか?または描画?次に保存するかダウンロードしますか?任意のヘルプ検索の数日後に最後にJavascriptを使用して画像からテキストを削除しますか?

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>

+0

、あなたが画像を編集し、それを保存するために、それをサーバに送り返すことができ、キャンバスにイメージをロードします。 – Teemu

+0

@Teemu疲れましたが、うまくいきませんでした。ダウンロードしたimgが壊れていますか? https://codepen.io/hdl881127/pen/KXgQme –

+0

FFのリンクコード内で画像が正常に見えます。私は技術的に細かいことを意味する=)。 – Teemu

答えて

0

ため

感謝。

これが最適です。 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({ 
 
\t apiKey: 'your-api-key-here', 
 
\t theme: 'dark', // Check out our new 'light' and 'dark' themes! 
 
\t tools: 'all', 
 
\t appendTo: '', 
 
\t onSave: function(imageID, newURL) { 
 
\t \t var img = document.getElementById(imageID); 
 
\t \t img.src = newURL; 
 
\t }, 
 
\t onError: function(errorObj) { 
 
\t \t alert(errorObj.message); 
 
\t } 
 
}); 
 
function launchEditor(id, src) { 
 
\t featherEditor.launch({ 
 
\t \t image: id, 
 
\t \t url: src 
 
\t }); 
 
\t 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'/>

関連する問題