We are using a FabricJS editor and we are loading SVG templates into it. We are also editing some texts, changing positions of objects and saving as SVG. Everything works fine here.
But now we need to load very big images inside one SVG. Each images in the SVG is going to be high resolution as this is used for print industry. Here we are not able to load that SVGs as the embedded images are very bigger.
We thought of a solution of re-sizing those images before loading to editor and after editing bringing back the original images as output. But this also does not work out as when we resize, we are facing some issue with positioning of objects in the SVG
Can someone suggest a way to fix this issue
I have also been using fabric.js for the same reason as yours.
As the issue of positioning image while showing on the canvas. You can position it like this.
$('#canvas').attr('width',img_data.width).attr('height',img_data.height);
var canvas = new fabric.Canvas('canvas');
var imgElement = document.getElementById('myimg');
var CanImg = new fabric.Image(imgElement, {
left: -1 * img_data.x,
top : -1 * img_data.y,
});
CanImg.selectable = false;
canvas.add(CanImg);
Using Left and top you can set position of x and y co-ordinates of the image.
It will work on the large image too.
You might get stuck at showing large image on canvas. But as far as the issue of positioning image, this will work.
Good Luck.
Related
I thought the thumbnail component of Bootstrap automatically took an image, and cut out a specific size thumbnail to slap on the site. Either I'm using this feature wrong or this is completely false. Everytime I create class="thumbnail", I just get a slightly smaller version of the photo.
As a photographer, my photos are huge, and the "thumbnails" are taking up half the page! Certainly I could resize everything in Photoshop to a 200X200px size and upload these as thumbnails, but I feel like there must be a beter way of doing this.
I tried in the html itself just putting width="200" and height="200" after img src, but the problem here is that instead of cutting a 200X200 square out of the image, the image was scaled down proportionally using one dimension. I.e., the image fits in a 200X200 square, but rather than filling up the entire square (since that's not the original proportions), it fills up a 200X100 type area.
Can anyone help?
Bootstrap won't resize your images. It is a CSS framework, it can only add styles to your web page but you can't use it to do any backend work, like thumbnails creation. Setting the dimensions in the HTML img tag doesn't resize your image neither, it is still the same image that is sent to the browser. So in order to boost your website performance, you need to think of another solution, you don't want to send huge images through the network if you're only gonna show them with thumbnail size.
What kind of website are you running?
For example, Wordpress automatically handles the thumbnails creation when you upload files through the Media Manager. I'm pretty sure most of the CMS have this functionnality.
If you have a PHP website without a CMS, you could try using a library such as phpthumb, that would require some coding though.
If you have a static HTML website, then you have no other choice but to resize the images manually in Photoshop.
By the way, do you optimize your images too? (compression with tools such as tinypng or jpeg-optimizer
I've got a little code to generate thumb:
public function generateThumb($pathToImage, $pathToThumb, $extension, $maxDim)
{
//Create a new image according to "MimeType"
switch($extension){
case "gif":
$img = imagecreatefromgif("{$pathToImage}");
break;
case "jpeg":
$img = imagecreatefromjpeg("{$pathToImage}");
break;
case "png":
$img = imagecreatefrompng("{$pathToImage}");
break;
}
// load image and get image size
$width = imagesx($img);
$height = imagesy($img);
// calculate thumbnail size, vertical and horizontal orientation
$new_width = ($width > $height) ? $maxDim : floor($width * ( $maxDim / $height ));
$new_height = ($height > $width) ? $maxDim : floor($height * ( $maxDim / $width ));
// create a new temporary image
$tmp_img = imagecreatetruecolor($new_width, $new_height);
// copy and resize old image into new image
imagecopyresized($tmp_img, $img, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
// save thumbnail into a file
imagejpeg($tmp_img, "{$pathToThumb}");
}
I'm sorry, but I can't remember where I found the original script (On SO and other website).
Using that you can generate a thumb each time you add a new image and then use this thumb in your thumbnail preview.
Nop, the Bootstrap will not resize files for You.
Even if You're the only user of the site u can make a file-upload form for yourself. Take a look at Paperclip - it's awesome. And do not forget to protect this form to disallow network users upload some ugly images on your site
Bookstrap is not for resizing api. You can use many of the Image Compression apps that are available.
I would recommend http://shrinkjpeg.com since it does not upload the images to server and compresses them locally in browser.
I am creating my first game in HTML 5 for mobile.
I'm just using the library "Easeljs-0.7.0", nothing PhoneGap.
I made my images to canvas 2024x1024 pixels, then each image by setting the scaleX and scaleY. However when the scale is less than 0.5 makes all images with poor quality.
How to solve this?
var test = new createjs.Bitmap("test.png");
test.scaleX = 0.23456;
test.scaleY = 0.23456;
APP.stage.addChild(test);
APP.stage.update();
Unfortunately this is how Canvas renders the bitmap, and its not something that can be controlled by JavaScript. It is possible to get some results in various browsers using the `context.imageSmoothingEnabled' property, but currently it requires vendor prefixes. Check out this thread:
Canvas Image Smoothing
To do this with EaselJS, you need to get the canvas context, which is not currently available without manually accessing it:
var context = myStage.canvas.getContext("2d");
context.webkitImageSmoothingEnabled = context.mozImageSmoothingEnabled = true;
If I create an image using HTML SVG element, can I then offer this as an SVG file download to the user. For example I may want to load an SVG image, apply some basic transformations to it, add some text, then let the user download the result as a vector image.
Is that possible? I have been doing something similar with Canvas but have been struggling creating a vector image. I wasn't aware that SVG elements were so versatile when I cam across them this morning but if I can do the above it would be great.
Simple solution using a data URI:
var svg_root = document.getElementById('your_svg_root_element_here');
var svg_source = svg_root.outerHTML;
var svg_data_uri = 'data:image/svg+xml;base64,' + btoa(svg_source);
var link = document.getElementById('anchor_element');
link.setAttribute('href', svg_data_uri);
Although it worked, when clicking on the link, the browser stalled for a few seconds.
This seems to be the simplest solution and should be compatible with all modern browsers. However, it has some noticeable overhead. If someone else knows a different solution (maybe using blobs or something similar), please add here as another answer!
I just use following code to add an image to my project,
var paper = Raphael("mpdraw_div", 1920, 1080);
var img = paper.image("temp.jpg", 150, 10, 710, 653);
When FF, IE8 is showing my image, Chrome is insisting to not show my image in my project, when I create a new page and use the code above, there is no problem.
My project have lots of divs recursively, but I've tried to write mpdraw_div to just after body tag, this is a problem also.
What may be the possible cause of this situation?
Thanks in advance.
I reailized that it's because of loading an image before raphael is reason to fail.
Solution is to load an image after some ms(I use 100ms) later.
Hope this help to you all.
I have been searching - am thinking what I want to do is not possible but thought I would check.
I have a few canvasses on an HTML page as follows: (these are IDs below)
canvasMain - this is going to display
a large version of an image
canvasThumbnail1 - this is going to
display a thumbnail image
canvasThumbnail2 - same as
above...etc
I have it working where I paint the canvasMain with the contents of the thumbnail. The problem is since the canvas is immediate it is copying the pixels as they are over to the canvasMain from canvasThumbnail. This is resulting in an enlarged pixelated image.
What I want to do is click on one of the canvasThumbnails and be able to grab the Image.src property as a string and then pull that into canvasMain instead of actually copying the pixels over from one canvas to another. Essentially just grab the address (local or say on Flickr) from where I can pull in the image. Pulling an image in to a canvas seems to scale it nicely.
From what I have seen I do not think that Image.src value is accessible through the 2d context. I enumerated through its properties and have only found nested objects or native code returns.
I figured that if I clicked on the canvasThumbnail, and then used (this) to get a reference to that canvas element and then grab the 2dcontext of that canvas I may be able to use a property of that context to get a string that represents the value of the Image.src.
Any ideas?
Thanks
Somehow you painted the image onto canvasThumbnail1, presumably from a (high resolution) Image element.
The canvasThumbnail1, or any canvas for that matter, has no memory on things painted on it. So if you paint a large Image onto a tiny canvasThumbnail, the high-resolution data does not exist on that tiny canvas. To get it you must use the original image again, or else you must paint to a larger canvas from the start.
In other words, instead of painting the thumbnail onto the main, you need to repaint Image element (that you used to make the thumbnail) onto the main.