TinyMCE and Image Cropping - image-processing

Question

I am writing a plugin for TinyMCE to crop images. This code works on firefox but doesn’t seem to work in other browsers.
Basically, I’m using JCrop to get the co-ordinates of the image and selected area and passing it to a server-side
method which does the cropping and returns the updated width, height and image src.
After, getting back the results. I update the image dimensions and src as follows.
tinyMCE.activeEditor.selection.getNode().src = croppedImageSource;
tinyMCE.activeEditor.selection.getNode().width = croppedImageWidth;
tinyMCE.activeEditor.selection.getNode().height = croppedImageHeight;
The Server-side method and crop co-ordinates are working as expected. While, the above code is not working well. Works on firefox but not on other browsers.
I was wondering If was updating the image selected in TinyMCE correctly?
Here is my full javascript function
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;
}
}
});
}
}

Answer 1

You may try
tinyMCE.activeEditor.selection.getNode().setAttribute('scr', croppedImageSource);
tinyMCE.activeEditor.selection.getNode().setAttribute('width', croppedImageWidth);
tinyMCE.activeEditor.selection.getNode().setAttribute('height', croppedImageHeight);
or jQuery
var $node = $( tinyMCE.activeEditor.selection.getNode() );
$node.attr('scr', croppedImageSource);
$node.attr('width', croppedImageWidth);
$node.attr('height', croppedImageHeight);