I’m trying to load an image from Media Manager or Dataset on a Html Canvas, inside a HtmlComponent. I would like to find the best approach to this method.
I created an Image Gallery and an image template #image1 . I easily can set the image src using:
export function gallery1_itemClicked(event) {
let imgSRC = event.item.src + ".jpg";
$w("#image1").src = imgSRC;
}
so the selected image from gallery is loaded on the template.
But when I’m trying to load the same image on a HTML Canvas inside a HtmlComponent, using the postMessage( ) method, I get error.
export function gallery1_itemClicked(event) {
let imgSRC = event.item.src + ".jpg";
$w("#apiframe").postMessage(imgSRC);
}
Error:
Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME
I’m taking into account the asynchronous loading process of the image.
The procedure work perfectly if the image is loaded from an external link (I sent as message to Html only the image title = file name)
The HTML code is:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function init () {
window.onmessage = (event) => {
if (event.data) {
console.log("HTML Code Element received a message!");
buttonAction(event.data);
}
}
}
// send message to the page code
function sendReturnMessage(msg) {
window.parent.postMessage(msg, "*");
}
</script>
</head>
<body onload="init();">
<canvas id="myCanvas" width="512" height="512" style="border:1px solid #000000;"> </canvas>
<script>
function buttonAction(fName) {
if (typeof fName === "string") {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.addEventListener('load', function() {
ctx.drawImage(img,0,0);
}, false);
img.src = fName;
}
}
</script>
</body>
</html>
images in Wix Media use special kind of URLs, that can only be used with Wix components. Trying to set it to any HTML component will fail. Currently, the only way is to use external sources for images to display them inside of HTML.
Thank you for the answer but it saddens me a lot.
I need to compose complex image layers using relative positions and blending effects. Then apply them on 3d models as maps. This can’t be done using Wix components, yet.
I would be happy even if I could only encode the image in base 64 (string type) save them somewhere and retrieve them from there. Is that possible? Inside Wix or do I need an external server?
Is it a Wix policy or should I wait until a real connection allows me to take advantage of the Wix capabilities?
Base64 encoding and storing to the database is an option if the image is not too big (< 0.5MB). But if you are loading multiple images, this might not be the best option as you won’t be able to make use of browser cache and every load will result in roundtrip to the database and this is usually slower than loading an image from a CDN.
In this particular case, using a third party image host may be a good option.
No problem, I’ll split the string and use various fields.
I suppose the image encoded strings should be passed using postMessage( ) , am I right? because no other access to Dataset , I understood.
Also I need to encode the images before upload them to Dataset. Do you think it’s possible to create a hidden Canvas on Wix page and generate the encoding string there, usingcanvas.toDataURL( )? I understood there are no access to Wix html layer.
One of the great advantages of WIX is the convenience and efficiency of managing content, all from a single control panel. Customers are not going to buy a solution where they have to manage two databases, pay two servers and parallel developments.
Also those images are related to many data. A common client will find it very difficult to upload and sort the data taking into account the relationships between the two databases, e.g. image and price / discounts / offers.
Yes, you would pass them using postMessage(…). If you don’t need to accept image in a form on a page, you could just as well insert it through Content Manager and encode using any tool.
Normally, we would advice to use Wix Media to store and show images, but your use case is more specific. We will take it as a feature request to expose Wix Media to non-Wix components.
Hi DA,
You can post the URL of the image and use it inside the HTML component. You can read more about postMessage here . If you still struggle with it, I recommend posting a new post with your question and the code you were trying to use.