在我的 Rails 应用程序中,我将 jcrop 与 krajee 的 bootstrap-fileinput 一起使用。我将 fileinput 附加到我的表单,然后尝试在 img 元素上使用 jcrop 。当我这样做时,图像预览消失,并在其中出现一个损坏图像的图标。我不确定发生了什么。
var btnCust = '<button type="button" class="btn btn-default crop-image" title="Add picture tags">' +
'<i class="glyphicon glyphicon-tag"></i>' +
'</button>';
var previewCust = '<div class="file-preview-frame" id="{previewId}" data-fileindex="{fileindex}" data-template="{template}">' +
'<div class="kv-file-content">' +
'<img src="{data}" class="kv-preview-data file-preview-image cropbox" title="{caption}" alt="{caption}">' +
'</div>' +
'{footer}' +
'</div>';
$('#update-profile-photo-input').fileinput({
showClose: false,
browseLabel: '',
removeLabel: '',
showCaption: false,
defaultPreviewContent: "<img src='" + $('.profile-image').attr('src') + "' alt='Your Avatar' class='cropbox'>",
layoutTemplates: {main2: '{preview} ' + btnCust + ' {remove} {browse}', footer: ''},
previewTemplates: {image: previewCust}
});
$('.crop-image').on('click', function () {
$('.cropbox').Jcrop({
aspectRatio: 1,
setSelect: [0, 0, 175, 175],
onSelect: update,
onChange: update
})
});
function update(coords) {
$('#user_crop_x').val(coords.x);
$('#user_crop_y').val(coords.y);
$('#user_crop_w').val(coords.w);
return $('#user_crop_h').val(coords.h);
}
下面是由文件输入创建的 html 的一部分。
html
<div class="kv-file-content">
<img src="blob:https%3A//my-app-werfds.c9.io/11176113-aab3-477c-bf1e-cf21a9c54cab" class="kv-preview-data file-preview-image cropbox" title="IMG_0315.JPG" alt="IMG_0315.JPG">
</div>
jcrop 遇到问题的预览图像是否有什么奇怪的地方?在我的控制台中,我收到一条错误消息 GET blob:https%3A//my-app-werfds.c9.io/11176113-aab3-477c-bf1e-cf21a9c54cab 404 (not find)
我不确定还应该包括什么。我没有包含该表格,因为我还没有尝试提交它。我只是在使用 jcrop 处理预览图像时遇到问题。
这是一个jsfiddle (我很难实现上述所有代码,但这基本上就是正在发生的事情)
最佳答案
无法定位是否或在何处Blob URL
已被撤销,但可以通过创建 <canvas>
来创建解决方法元素,使用.toDataURL()
并替换 src
的.file-preview-image
与 data URI
调用之前现有图像 .Jcrop()
$('.crop-image').on('click', function () {
var img = $('.file-preview-image');
var canvas = $("<canvas>")[0];
canvas.width = img[0].naturalWidth;
canvas.height = img[0].naturalHeight;
var ctx = canvas.getContext("2d");
ctx.drawImage(img[0], 0, 0);
var url = canvas.toDataURL();
img.attr("src", url).Jcrop()
});
jsfiddle https://jsfiddle.net/bea09mz9/3/
关于javascript - 使用 Jcrop 和文件输入在上传之前裁剪图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38555472/