Image processing TinyMCE与图像裁剪
我正在为TinyMCE编写一个裁剪图像的插件。这段代码可以在firefox上运行,但在其他浏览器中似乎不起作用 基本上,我使用JCrop获取图像和选定区域的坐标,并将其传递给服务器端 方法进行裁剪并返回更新的宽度、高度和图像src 之后,返回结果。我更新图像尺寸和src如下Image processing TinyMCE与图像裁剪,image-processing,tinymce,Image Processing,Tinymce,我正在为TinyMCE编写一个裁剪图像的插件。这段代码可以在firefox上运行,但在其他浏览器中似乎不起作用 基本上,我使用JCrop获取图像和选定区域的坐标,并将其传递给服务器端 方法进行裁剪并返回更新的宽度、高度和图像src 之后,返回结果。我更新图像尺寸和src如下 tinyMCE.activeEditor.selection.getNode().src = croppedImageSource; tinyMCE.activeEditor.selection.getNode().wid
tinyMCE.activeEditor.selection.getNode().src = croppedImageSource;
tinyMCE.activeEditor.selection.getNode().width = croppedImageWidth;
tinyMCE.activeEditor.selection.getNode().height = croppedImageHeight;
服务器端方法和作物坐标按预期工作。然而,上面的代码并不能很好地工作。适用于firefox,但不适用于其他浏览器
我想知道在TinyMCE中选择的图像更新是否正确
这是我的完整javascript函数
function cropAndSave()
{
var imgSrc = document.getElementById('jcrop_target').src;
if(checkJcropCoords())
{
$.ajax({
async: false,
url: "/DocViewImageCrop.page",
type: 'POST',
data:
{
imgData: imgSrc,
cW: $("#w").val(),
cH: $("#h").val(),
cX: $("#x").val(),
cY: $("#y").val()
},
dataType: 'json',
complete: function(xmlRequestObject, successString)
{
var fileExists = xmlRequestObject.responseXML.getElementsByTagName("fileExists")[0].firstChild.nodeValue;
if(fileExists == undefined || fileExists == "false")
{
alert('Image not found on server. Try uploading the image, before attempting to resize');
}
else
{
tinyMCE.activeEditor.selection.getNode().src = xmlRequestObject.responseXML.getElementsByTagName("imgsrc")[0].firstChild.nodeValue;
tinyMCE.activeEditor.selection.getNode().width = xmlRequestObject.responseXML.getElementsByTagName("width")[0].firstChild.nodeValue;
tinyMCE.activeEditor.selection.getNode().height = xmlRequestObject.responseXML.getElementsByTagName("height")[0].firstChild.nodeValue;
}
}
});
}
}
你可以试试
tinyMCE.activeEditor.selection.getNode().setAttribute('scr', croppedImageSource);
tinyMCE.activeEditor.selection.getNode().setAttribute('width', croppedImageWidth);
tinyMCE.activeEditor.selection.getNode().setAttribute('height', croppedImageHeight);
或jQuery
var $node = $( tinyMCE.activeEditor.selection.getNode() );
$node.attr('scr', croppedImageSource);
$node.attr('width', croppedImageWidth);
$node.attr('height', croppedImageHeight);