Added support for raster image loading through image libraries
git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1636 eee81c28-f429-11dd-99c0-75d572ba1dddmaster
Alexis Deveria
parent
3bbc7173b7
commit
ee62c61181
|
|
@ -20,11 +20,29 @@ svgEditor.addExtension("imagelib", function() {
|
|||
description: 'Free library of 2300+ illustrations'
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
var xlinkns = "http://www.w3.org/1999/xlink";
|
||||
|
||||
function closeBrowser() {
|
||||
$('#imgbrowse_holder').hide();
|
||||
}
|
||||
|
||||
function importImage(url) {
|
||||
var newImage = svgCanvas.addSvgElementFromJson({
|
||||
"element": "image",
|
||||
"attr": {
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"width": 0,
|
||||
"height": 0,
|
||||
"id": svgCanvas.getNextId(),
|
||||
"style": "pointer-events:inherit"
|
||||
}
|
||||
});
|
||||
svgCanvas.clearSelection();
|
||||
svgCanvas.addToSelection([newImage]);
|
||||
svgCanvas.setImageURL(url);
|
||||
}
|
||||
|
||||
window.addEventListener("message", function(evt) {
|
||||
// Receive postMessage data
|
||||
|
|
@ -42,15 +60,25 @@ svgEditor.addExtension("imagelib", function() {
|
|||
svgCanvas.importSvgString(response);
|
||||
break;
|
||||
case 'd':
|
||||
if(response.indexOf('data:') === 0) {
|
||||
if(response.indexOf('data:image/svg+xml') === 0) {
|
||||
var pre = 'data:image/svg+xml;base64,';
|
||||
var src = response.substring(pre.length);
|
||||
svgCanvas.importSvgString(svgCanvas.Utils.decode64(src));
|
||||
break;
|
||||
} else if(response.indexOf('data:image/') === 0) {
|
||||
|
||||
importImage(response);
|
||||
break;
|
||||
}
|
||||
// Else fall through
|
||||
default:
|
||||
$.alert('Unexpected data was returned', closeBrowser);
|
||||
// TODO: See if there's a way to base64 encode the binary data stream
|
||||
// var str = 'data:;base64,' + svgCanvas.Utils.encode64(response, true);
|
||||
|
||||
// Assume it's raw image data
|
||||
// importImage(str);
|
||||
|
||||
$.alert('Unexpected data was returned: ' + response, closeBrowser);
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,20 +6,44 @@
|
|||
|
||||
<h1>Select an image:</h1>
|
||||
<a href="smiley.svg">smiley.svg</a>
|
||||
|
||||
<br>
|
||||
<a href="../../images/logo.png">logo.png</a>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
|
||||
$('a').click(function() {
|
||||
|
||||
// Do ajax request for image's href value
|
||||
$.get(this.href, function(data) {
|
||||
|
||||
// This is where the magic happens!
|
||||
window.top.postMessage(data, "*");
|
||||
// Convert Non-SVG images to data URL first
|
||||
// (this could also have been done server-side by the library)
|
||||
if(this.href.indexOf('.svg') === -1) {
|
||||
var img = new Image();
|
||||
img.onload = function() {
|
||||
var canvas = document.createElement("canvas");
|
||||
canvas.width = this.width;
|
||||
canvas.height = this.height;
|
||||
// load the raster image into the canvas
|
||||
canvas.getContext("2d").drawImage(this,0,0);
|
||||
// retrieve the data: URL
|
||||
try {
|
||||
var dataurl = canvas.toDataURL();
|
||||
} catch(err) {
|
||||
// This fails in Firefox with file:// URLs :(
|
||||
alert("Data URL conversion failed: " + err);
|
||||
var dataurl = "";
|
||||
}
|
||||
window.top.postMessage(dataurl, "*");
|
||||
}
|
||||
img.src = this.href;
|
||||
} else {
|
||||
// Do ajax request for image's href value
|
||||
$.get(this.href, function(data) {
|
||||
|
||||
}, 'html'); // 'html' is necessary to keep returned data as a string
|
||||
// This is where the magic happens!
|
||||
window.top.postMessage(data, "*");
|
||||
|
||||
}, 'html'); // 'html' is necessary to keep returned data as a string
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1233,6 +1233,33 @@
|
|||
updateToolButtonState();
|
||||
};
|
||||
|
||||
var setImageURL = Editor.setImageURL = function(url) {
|
||||
if(!url) url = default_img_url;
|
||||
|
||||
svgCanvas.setImageURL(url);
|
||||
$('#image_url').val(url);
|
||||
|
||||
if(url.indexOf('data:') === 0) {
|
||||
// data URI found
|
||||
$('#image_url').hide();
|
||||
$('#change_image_url').show();
|
||||
} else {
|
||||
// regular URL
|
||||
|
||||
svgCanvas.embedImage(url, function(datauri) {
|
||||
if(!datauri) {
|
||||
// Couldn't embed, so show warning
|
||||
$('#url_notice').show();
|
||||
} else {
|
||||
$('#url_notice').hide();
|
||||
}
|
||||
default_img_url = url;
|
||||
});
|
||||
$('#image_url').show();
|
||||
$('#change_image_url').hide();
|
||||
}
|
||||
}
|
||||
|
||||
// updates the context panel tools based on the selected element
|
||||
var updateContextPanel = function() {
|
||||
var elem = selectedElement;
|
||||
|
|
@ -2702,33 +2729,6 @@
|
|||
});
|
||||
}
|
||||
|
||||
var setImageURL = Editor.setImageURL = function(url) {
|
||||
if(!url) url = default_img_url;
|
||||
|
||||
svgCanvas.setImageURL(url);
|
||||
$('#image_url').val(url);
|
||||
|
||||
if(url.indexOf('data:') === 0) {
|
||||
// data URI found
|
||||
$('#image_url').hide();
|
||||
$('#change_image_url').show();
|
||||
} else {
|
||||
// regular URL
|
||||
|
||||
svgCanvas.embedImage(url, function(datauri) {
|
||||
if(!datauri) {
|
||||
// Couldn't embed, so show warning
|
||||
$('#url_notice').show();
|
||||
} else {
|
||||
$('#url_notice').hide();
|
||||
}
|
||||
default_img_url = url;
|
||||
});
|
||||
$('#image_url').show();
|
||||
$('#change_image_url').hide();
|
||||
}
|
||||
}
|
||||
|
||||
// added these event handlers for all the push buttons so they
|
||||
// behave more like buttons being pressed-in and not images
|
||||
(function() {
|
||||
|
|
|
|||
|
|
@ -8144,6 +8144,7 @@ this.importSvgString = function(xmlString, toElements) {
|
|||
return true;
|
||||
};
|
||||
|
||||
|
||||
// Layer API Functions
|
||||
|
||||
// Group: Layers
|
||||
|
|
@ -9478,7 +9479,7 @@ this.setImageURL = function(val) {
|
|||
|
||||
batchCmd.addSubCommand(new ChangeElementCommand(elem, changes));
|
||||
addCommandToHistory(batchCmd);
|
||||
call("changed", elem);
|
||||
call("changed", [elem]);
|
||||
}).attr('src',val);
|
||||
} else {
|
||||
addCommandToHistory(batchCmd);
|
||||
|
|
|
|||
Loading…
Reference in New Issue