score:0
interesting question. here is a working example: (it wont download in online sandbox, but works fine on independent branches e.g. localhost, see console messages) sandbox
import react, { useref, useeffect, usestate } from "react";
const crop = function(){
const canvas = useref();
const file = useref();
const preview = useref();
const [imageparams, setimageparams] = usestate();
const [context, setcontext] = usestate();
// initialize
useeffect(function(){
file.current.onchange = onnewimage;
setcontext( canvas.current.getcontext('2d') );
},[])
// draw image on imageparams change
useeffect(function(){
if(!imageparams) return;
context.drawimage( preview.current, 0, 0, imageparams.width*(700/imageparams.height), 700 )
}, [imageparams])
// get with and height, replace preview, set params
function onnewimage(){
const newimgurl = url.createobjecturl( file.current.files[0] );
const newimage = document.createelement('img');
newimage.setattribute('src', newimgurl);
newimage.onload = function(){
const {width, height} = newimage;
const type = file.current.files[0].type
newimage.setattribute('width', '50px');
preview.current.parentelement.append(newimage);
preview.current.remove();
preview.current = newimage;
setimageparams({ width, height, type });
}
}
// save image on click
function handlesave(){
canvas.current.toblob(function(blob){
const anchor = document.createelement('a');
anchor.innerhtml = 'download';
anchor.download = "my_file."+imageparams.type.replace(/^.{1,}\//,'');
anchor.href = (window.webkiturl || window.url).createobjecturl(blob);
anchor.dataset.downloadurl = [imageparams.type, anchor.download, anchor.href].join(':');
anchor.click();
preview.current.parentelement.append(anchor);
}, imageparams.type);
}
return <>
<div classname="input">
<input
ref={file}
type="file"
accept="image/png, image/jpeg" />
<div
style={{width:"100px", display: 'inline-block'}}>
<img
ref={preview}
/>
</div>
<button
onclick={handlesave} >save image</button>
</div>
<div class="canvas">
<canvas
ref={canvas}
width='700px'
height='700px' />
</div>
</>;
}
export default crop;
Source: stackoverflow.com
Related Query
- crop image in reactjs using html5 canvas
- Rendering / Returning HTML5 Canvas in ReactJS
- Canvas element does not resize when using ReactJS and PaperJS together
- How to center an image in ReactJS using css
- How to upload image using ReactJS and save into local storage?
- using device camera for capturing image in reactjs
- How to open a canvas as an image in a new tab with Reactjs
- How to rotate an image with 45 degrees by using reactJs
- How to display an image in full screen background using reactJS and css?
- Image doesn't show up in reactjs when using background: url()
- upload an image with a token to a fastAPI route using POST from reactJS
- Using the HTML5 audio tag in Reactjs
- How can I create a button which Fetches image from API and download to the local with using ReactJs
- How to set a full background image in CSS using reactjs style?
- Can't convert canvas to image after draw image on canvas with Reactjs
- Image modal in ReactJS with slideshow using JavaScript
- Cannot crop image using react-image-crop
- Drawing a straight line using mouse events on canvas in ReactJs
- How can I crop an image on the client side without losing resolution using React
- Uploading image files to AmazonS3 using ReactJs
- image modal with reactjs using javascript
- Image not getting displayed when using Reactjs map function. Error--SRC undefined
- How to display image from mongodb using Reactjs
- How to display image tag in reactjs using template literal?
- While drawing on a HTML5 canvas using mouse, mouse position is not correctly positioned
- How to set background image in Reactjs using external css?
- Working with ReactJS and HTML5 Canvas
- Fetch and display image in reactjs from django backend using json
- how to draw rectangle on a image dynamically using canvas in react js
- Profile Image won't display after loading from local storage using ReactJS
More Query from same tag
- How to map a promise function to a JSX component?
- Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `ListView`
- React Hooks state change doesn't pass in proper props
- Router, Rout and Switch not working in my React website?
- withAuth HOC renders private page for a few seconds
- gatsby-background-image crop left side of background image on browser resize
- Calling a Parameter as State in React
- how to handle race conditions in class components?
- ReactJS Webpack error type.toUpperCase is not a function
- Async/await call action from React component
- ASP.NET Javascript Services Server Side Render Specific Routes
- Why does using imported functon cause invalid hook error?
- VS Code autocomplete/intellisense not working
- Copy Text To Clipboard using ReactJS
- How to change the state object when one of the fields is an array?
- Why the autofocus isn't working in ReactJS with antd?
- React form - Field is automatically unselected when value changes
- How to test style for a React component attribute with Enzyme
- I'm having trouble with react-datepicker position
- Flexbox align-items not working on Link components inside unordered list
- I'm working on a notes app. How do I get a new Note component to be added on each button click?
- Add Dynamic TextFields Through Dropdown Component Selection?
- React Promise.all challenge
- How to make Reactjs not rerender certain components
- react form events are not firing
- How to prevent the repetitive execution of a function in an addEventListener?
- How to change the webpack config for styled components if there is already another instance of styled components in the same page?
- How to configure service workers with create-react-app
- selection limit function not working on checkbox form reactjs
- Plotting bars with react with different colors, but they're all in black why?