I'm trying to use cropper.js for the following scenario:
User uploads image via form input
User crops the image down resulting in crop a
Crop a is shown as a new image
User crops the image further resulting in crop b
Both cropped images are sent to the server
For some reason when I put the base64 data urls generated via my code into a decoder or image tag I get either a broken image or a tiny sliver of the image. Here are the relevant parts of my code:
Html exists on the page including an image tag: with id=originalImg
cropper = $('#originalImg');
cropper.cropper({
dragMode: 'crop',
checkCrossOrigin: true,
guides: false
});
User uses the cropper.js interface to select a crop, then clicks a button which gets the cropped section with:
cropper.cropper('getCroppedCanvas').toDataURL('image/jpeg');
I then replace the originalImg tag with a new image tag with the source from step two, and then do step 1 and 2 above again.
Any idea why the resulting base64 seems wonky?
Related
Hi I am making an online image editor using fabric js.
I am trying to show the user an image similar to the canvas that the user has worked on by importing it from Google and the canvas can be converted to a base64 url through toDataURl().
At this time, to get the image search result corresponding to this, https://www.google.com/searchbyimage?image_url={base64url} I enter the following address, but an error occurs.
How to fix the base64 url to get the desired image result search
When importing external SVG images the Inkscape offers three options:
Include SVG image as editable object(s) in the current file
Embed the SVG file in a image tag (not editable in this document)
Link the SVG file in a image tag (not editable in this document)
At first, for convenience I imported an SVG images (Image A) into master SVG image B in the third way (Link the SVG file) so that when editing image A, master image B changes accordingly. However, later in the publishing process, I found that I needed to make sure every part in master image B had to be editable, including those parts within image A.
Had I imported image A in the first way above (include SVG image), this would be possible. I had made some transformations to the linked image A within master image B so I didn't want to do it again. Is there a way to transform a linked image (<image xlink:href="XXX.svg" />) to an included image (<svg>...</svg>) with just a few clicks while preserving all the transformations I did to this image?
Right-click on the image and select 'Embed image'. This is going to embed it as an image, <svg:image ...>, though, not as an svg (I think that would be invalid SVG code, too).
For multiple images, use the extension 'Extensions > Images > Embed Images' without any image selected (or with all of them).
I'm trying to replace the image using google doc api. Image is replaced but it takes the dimensions of previous and so gets cropped.
I also tried by providing height and width but it didn't work.
When I reset the image manually in google doc then the full image is showing in doc and after reset image, its height and width can be changed accordingly. But google doc API did not provide an option to reset image.
Here is a little code which replaces the image in a Google doc :
"replaceImage": {
"imageObjectId": IMAGE_ID",
"uri": REPLACED_IMAGE_URL,
"imageReplaceMethod": IMAGE_REPLACE_METHOD,
}
Is there any possible way to replace the image so that it can replace the previous image properly.
Thanks.
I don't think it is possible to avoid cropping when using the replaceImage request. As it can be seen in the official documentation, the only valid value for imageReplaceMethod is CENTER_CROP, which "Scales and centers the image to fill the bounds of the original image. The image may be cropped in order to fill the original image's bounds. The rendered size of the image will be the same as that of the original image.".
I hope this is of any help.
I have multiple image(near by 40 images), I need to combine these images as single image. I have referred the below link,
Combine two Images into one new Image
but I dint find anything like Graphics in UWP. How toacheive this requirement
Making a render target bitmap and draw the image to render target bitmap.
The example that how to draw image to render target bitmap.
And you can save render target bitmap to file, see http://jamescroft.co.uk/blog/how-to/storing-a-uwp-inkcanvas-drawing-as-an-image-in-a-storagefile/
I'm building functionality that allows users to upload an image, then crop it to a square (for profile pictures etc...)
Currently, the process works like this:
User selects image from hd
Image is uploaded to S3
S3 Path is sent back to view, and image with jCrop is shown
On submit button being clicked, my controller action gets the coords set above
Now I'd like to crop this image to the given coords (note- I'm using lpatters fork of node-imagemagick as it contains 'offset'
Unfortunately, .crop only accepts a path - which we don't have, since it's hosted on S3 at this point.
Is there any workaround?
I saw tmp, but this may be a little overkill?
What about using some of the other entry points such as "resize" that then allow you to provide the custom arguments? I'm using streams in this code: https://github.com/jeffwilcox/4th-cloud/blob/master/lib/webserver.js#L542