First, add Uploaded image in the Canvas.
Second, Extract that same image from canvas and use toDataURL on that image object .
Problem : I can't find the same image that was uploaded.
Related
I'm doing a custom game which I'd like to change the background and a character picture according to a file they upload.
The input file is outside phaser. If possible, I'd like to show the picture directly without uploading to the server.
If you use a file loader to get the base64 encoding of the image, you can use this.textures.addBase64 to load the image into the texture manager, after that loads you can create new objects with that image tag, or set existing images to that texture.
Working Example =>
https://stackblitz.com/edit/phaser-use-uploaded-image
I am trying to create an image upload utility in Hug / python and wanted to save images and gifs. But on uploading some of the gif images, the gif images seem to be a lot pixelated. Given below is the code snippet that I am using in the upload utility.
image = Image.open(io.BytesIO(file))
frames = [frame.copy() for frame in ImageSequence.Iterator(image)]
image.save(media_location, save_all=True, append_images=frames)
The original GIF : via GIPHY
The uploaded GIF
Fixed it!
The workaround can be not passing the animated images with PIL and directly storing it with a context manager.
if image.is_animated:
with open(media_location, 'wb') as fp:
fp.write(byte_stream)
here my code image
As shown in the picture, the code is the same. I try to upload an image to the seqeulize db with multer, but I can't distinguish it. Can't save the image as an array?
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?
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