iddan / react-native-canvas Goto Github PK
View Code? Open in Web Editor NEWA Canvas component for React Native
License: MIT License
A Canvas component for React Native
License: MIT License
react-native: 0.47.2
react-native-canvas: 0.1.20
I am drawing the arc using react-native-canvas.
It works fine on iOS but on android it's looking blurring.
handleCanvas = (canvas) => {
if (canvas) {
const { percent } = this.props
const width = this.props.width <= 150 ? this.props.width : 150
const height = this.props.height <= 150 ? this.props.height : 150
this.canvas = canvas
if (Platform.OS === 'ios') {
this.canvas.width = width
this.canvas.height = height
}
this.ctx = this.canvas.getContext('2d')
this.draw(percent)
} else {
//console.log("Canvas Null")
return
}
}
draw(percent) {
const { hslH, lineWidth, step, dark } = this.props
const width = this.props.width <= 150 ? this.props.width : 150
const height = this.props.height <= 150 ? this.props.height : 150
this.ctx.clearRect(0, 0, width, height)
this.ctx.save()
const start = -Math.PI/2;
const end = -Math.PI/2 + 2 * Math.PI * percent / 100;
const t = lineWidth;
const radius = (width - t) / 2;
this.ctx.beginPath()
this.ctx.arc(width / 2, height / 2, radius, start, 1.5 * Math.PI)
this.ctx.lineWidth = t
if (dark) {
this.ctx.strokeStyle = 'rgba(0, 0, 0, 0.5)'
} else {
this.ctx.strokeStyle = 'rgba(100, 100, 100, 0.2)'
}
this.ctx.lineCap='round'
this.ctx.lineJoin = 'round'
this.ctx.stroke()
if (percent > 0) {
const gradient = this.ctx.createLinearGradient(0, width, 0, 0)
.then(gradient => {
gradient.addColorStop(0, 'hsl(' + hslH + ', 100%,' + 80 + '%)')
gradient.addColorStop(1, 'hsl(' + hslH + ', 100%,' + 50 + '%)')
this.ctx.beginPath()
this.ctx.arc(width / 2, height / 2, radius, start, end, false)
this.ctx.strokeStyle = gradient
this.ctx.lineWidth = t
this.ctx.lineCap='round'
this.ctx.lineJoin = 'round'
this.ctx.stroke()
})
}
}
....
<Canvas ref={this.handleCanvas}/>
....
Anyone has similar experiences?
Following code work on iOS but not on Android.
handleCanvas = canvas => {
const context = canvas.getContext('2d');
const image = new CanvasImage(canvas);
const filePath = '/path/to/image.jpg';
image.src = Platform.OS === 'android' ? `file://${filePath}` : filePath;
image.addEventListener('load', () => {
context.drawImage(image, 0, 0, 200, 200);
});
};
I'm porting a mini-game which uses canvas. This requires user interaction, so I injected a touch handler that posts a message to pass the event back to the RN side.
this.onkeypress = 'window.addEventListener("touchstart", function (e) { window.postMessage("touchstart") } );';
canvas.webview.injectJavaScript(this.onkeypress);
However, handleMessage() in Canvas.js tries to parse this as JSON which crashes.
var data = JSON.parse(e.nativeEvent.data);
I tried passing in serialized JSON, but the rest of the code needs id, meta, and payload fields in a specific way which the app has no visibility into. I got it to work by wrapping the JSON.parse in a try-catch block, and if it catches, pass data
directly to listeners
and skip the rest including the bus
call.
Would you be interested in a PR? Or is there a better way to accomplish this?
npm install react-native-canvas@latest --save
Issues are:
npm ERR! git rev-list -n1 webview-improvements: fatal: ambiguous argument 'webview-improvements': unknown revision or path not in the working tree.
npm ERR! git rev-list -n1 webview-improvements: Use '--' to separate paths from revisions, like this:
npm ERR! git rev-list -n1 webview-improvements: 'git [...] -- [...]'
npm ERR! git rev-list -n1 webview-improvements:
npm ERR! Darwin 15.0.0
npm ERR! argv "/usr/local/Cellar/node/6.7.0/bin/node" "/usr/local/bin/npm" "install" "react-native-canvas" "--save"
npm ERR! node v6.7.0
npm ERR! npm v3.10.7
npm ERR! code 128
npm ERR! Command failed: git rev-list -n1 webview-improvements
npm ERR! fatal: ambiguous argument 'webview-improvements': unknown revision or path not in the working tree.
npm ERR! Use '--' to separate paths from revisions, like this:
npm ERR! 'git [...] -- [...]'
npm ERR!
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues
npm ERR! Please include the following file with any support request:
npm ERR! /Users/varmabhupatiraju/Desktop/Coordinates/npm-debug.log
I note that this repo is unmaintained, but you mention a new version you are working on.
Is this still progressing ? I only ask as it would be super useful for me to be able to use canvas in RN.
Thanks!
J
Helps me?
I want to create a drawing application on an image. I cant found HTMLImageElement in react-native.
Canvas is not viewing when loading from pre bundled source or in production.
I'm using your package to port existing code for a Node.js program to work on React-Native and it involves drawing an image to the canvas, then reading the pixel data from the canvas. It works on iOS perfectly but when I run it on Android, the promise in ctx.getImageData never returns, so my program's execution halts at the "await", shown below. It's an awkward script but the lines in question are shown below.
ctx.drawImage(element, 0, 0, width, height);
ctx.font = font;
ctx.fillStyle = fontColor;
ctx.textAlign = textAlign;
ctx.textBaseline = textBaseline;
ctx.fillText("Text Overlay", textXCoordinate, textYCoordinate);
console.log("A")
imageData = await ctx.getImageData(0, 0, width, height);
console.log("B")
Both console logs print on iOS, and the image data is accessible but on Android, "A" gets printed and nothing else happens. Because of the structure of your files in the way they inherit methods and properties from webview classes, I'm finding it really hard to debug what's going wrong. Any idea what could be causing this?
Im trying to set the canvas width larger than 300 but I cant, anyway to do this or a allow preview?
本来我的功能是正常的,后来我想动态的改变canvas的宽度和高度,但是在 canvas.width = img.width; canvas.height = img.height后,我再去选择图片,图片没有在屏幕上显示,一片空白
this component can not work~ what is the problem? status code 500
I apologise if this is not the place to ask this question, but I am reaching out for some help.
I am trying to animate the shape I draw using your Canvas implementation ( thank you for your creation) but I loose the context of the canvas when I attempt to re-render my component from a state change or a props changes via Redux.
null is not an object (evaluating 'canvas.getContext');
` handleCanvas = (canvas) => {
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'purple';
ctx.fillRect(0, 0, 100, 100);
}
render() {
return (
)
}`
Following your example, however I had to bind this.handleCanvas so I could access 'this' from within handleCanvas. When I call a state update or a Redux action from within handleCanvas, re-rendering does not work, this is when I receive the error.
Any help would be greatly appreciated, thanks.
Your simple example works in ios, but in android the rectangle is not rendered. Maybe I'm missing something, but it seems really, really simple. Just doesn't render.
Can't get measureText('xxx').width?
The trouble has been reproduced with your example too (https://www.npmjs.com/package/react-native-canvas).
Please see screenshot below. Digits were added for debugging (as text, before and after "Canvas" object rendering).
Used versions:
[email protected]
[email protected]
[email protected]
Tested on Android 4.4 and 5.1
Dev machine OS: Linux
I use canvas to show a chart, but the webview width is always 300, can i change it?
Is it possible to pass in an image, and get the RGB back?
on the Genymotion android ,it can work. but I use HTC, it can't draw image . I find some issues say out of the scope of WebView library. but how can I save this problem
Hi, just found this module today, looks great so far.
However the project I am trialling it for requires radial gradients, but i get the error above when I try to add a color stop to a gradient.
Thanks!
Possible Unhandled Promise Rejection (id: 0):
Error: Unable to open URL: file:///
Error: Unable to open URL: file:///
at createErrorFromErrorData (blob:http://localhost:8081/f817db7d-0270-489b-9116-5ea0036b4e8a:2270:17)
How to fixed it? or I do something wrong?
Thanks for the library, so far so good!
I tried using it by setting a width and height to some values, but whatever I do they remain at 300x150. Meaning:
render() {
return <Canvas width={80} height={80} />
}
and then immediately in componentWillReceiveProps or any other:
console.log(canvas.width, canvas.height) - prints 300, 150
I was looking at your source and I see webviewProperties({ width: 300, height: 150}) - it must be related to that. I didn't try this on an Android simulator yet, but once I have that info I'll share.
Again, thanks for the library!
Using the example I was able to display images from url. But how can I display local images like a svg from source string?
I still can zoom canvas, how to turn it off? If adding meta tags to html is no longer standard when updating the component
splitImage (canvas, x, y, rows, cols) {
const {height, width} = Dimensions.get('screen')
const CanvasXSize = width / cols - 2
const CanvasYSize = (height / 2) / rows
canvas.width = CanvasXSize
console.log('CanvasXSize',CanvasXSize);
canvas.height = CanvasYSize
const ctx = canvas.getContext('2d')
const img = new CanvasImage(canvas)
img.src = "https://scontent-sin6-2.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/21820297_280457069027480_5332287299113713664_n.jpg"
img.addEventListener('load', () => {
this.setState({ test: 'load' })
const imgW = img.width
console.log('imgW', imgW)
const imgH = img.height
const chunkWidth = imgW / cols
console.log('chunkWidth', chunkWidth)
const chunkHeight = imgH / rows
ctx.drawImage(
img,
x * chunkWidth,
y * chunkHeight,
chunkWidth,
chunkHeight,
0,
0,
CanvasXSize,
CanvasYSize
)
}, false)
}
I'm trying to split image based on the row and col and i manage to get everything working in ios but on android it can't seem to trigger load event, did anyone know why and how to solve it?
Hi,
Thank you for the package.
I have followed instructions in the source and I am not able to draw image on canvas if image's source is within a project.
here is the code:
import React from 'react';
import { StyleSheet} from 'react-native';
import Canvas, {Image as CanvasImage} from 'react-native-canvas';
export default class App extends React.Component {
handleCanvas = (canvas) => {
const image = new CanvasImage(canvas);
canvas.width = 100;
canvas.height = 100;
const context = canvas.getContext('2d');
image.src = './dys.jpg';
//'https://image.freepik.com/free-vector/unicorn-background-design_1324-79.jpg'; Note: with this uri everything works well
image.addEventListener('load', () => {
debugger
console.log('image is loaded');
context.drawImage(image, 0, 0, 100, 100);
});
}
render() {
return (
<Canvas ref={this.handleCanvas}/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Is it possible to set image.src to local path?
Thank you once again.
Regards,
Zoran
My objective is have an HTML print on Canvas, then save that canvas into physical file.
Thanks,
Punleu
Hello, I made a simple canvas which superpose two images and I would like to get the Data64 (or even a jpg file) of it but when I do canvas.toDataURL() the output is:
Promise { "_40": 0, "_55": null, "_65": 0, "_72": null, }
Is it normal ?
I'm trying to render a base64 image on the canvas but keep getting an error: 'TypeError: type error'.
I'm using the `' component in react-native and passing this into the drawImage function of the context:
handleCanvas = (canvas) => {
const ctx = canvas.getContext('2d');
var img = new Image();
img.src = `data:image/jpeg;base64,${this.state.imageURI}`
img.onLoad = function() {
ctx.drawImage(img, 0, 0, 100, 100);
}
}
<Canvas ref={this.handleCanvas}/>
ctx.fillRect(0, 0, 300, 300);
but it is a rectangle, the height isn't 300
this is my code
const canvas = this.refs.canvas
const image = new CanvasImage(canvas, canvas.height, canvas.width)
let data = canvas.toDataURL()
I want to get base64 but it don't work
I would like to know about putImageData() can it work ? I try to use but I got this message error.
ref. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/putImageData
Thank you so much.
For a current project of mine I am using the following snippet to draw and wrap Text: https://stackoverflow.com/questions/2936112/text-wrap-in-a-canvas-element/19894149#19894149
The problem with this implementation of the canvas is that getting the text measurements is an asynchronous process. I had to label the function as async and added await labels on the measureText function.
Using this "fix" now gives me quite the paint flashing, each text appearing with a slight delay.
Is there a reason for the asynchronous nature of the method?
Cheers and thanks for the lib!
Hello. Thank you for this awesome package.
I'm testing getting image data from canvas and i found that image size returned after canvas.toDataURL() call is 4 times in width and 2 times in height bigger than canvas width and height.
Could you point me what i'm doing wrong please or tell me if it's a bug. My code looks the following way:
handleCanvas(canvas) {
this.canvas = canvas;
canvas.width = 200;
canvas.height = 300;
const context = canvas.getContext('2d');
const image = new CanvasImage(canvas);
image.addEventListener('load', () => {
context.drawImage(
image,
0,
0
);
});
image.src = `data:image/jpeg;base64,${this.imageData}`;
});
}
...
this.canvas.toDataURL('image/jpeg')
.then((data) => {
// By the way here data is wrapped in quotes by some reason, so we need to remove them
data = data.substring(1);
data = data.slice(0, -1);
if (data.indexOf('data:image/jpeg;base64,') > -1) {
// Removing "data:image/jpeg;base64," for saving into file as base64 data
data = data.substring(23);
}
RNFetchBlob.fs.writeFile(this.path, data, 'base64')
.then(() => {
// Image data saved and has 200x4 pixels width and 300x2 pixels height
})
}
For saving image react-native-fetch-blob package is used
Thanks in advance
加载远程图片,加载不出来;(Unable to load remote pictures)
how can refresh the Canvas
i get an error when i try to execute npm install react-native-canvas@latest --save
this is the log:
npm ERR! git rev-list -n1 webview-improvements: fatal: ambiguous argument 'webview-improvements': unknown revision or path not in the working tree.
npm ERR! git rev-list -n1 webview-improvements: Use '--' to separate paths from revisions, like this:
npm ERR! git rev-list -n1 webview-improvements: 'git <command> [<revision>...] -- [<file>...]'
npm ERR! git rev-list -n1 webview-improvements:
npm ERR! Darwin 15.0.0
npm ERR! argv "/Users/WellDone2044/.nvm/versions/node/v4.1.0/bin/node" "/Users/WellDone2044/.nvm/versions/node/v4.1.0/bin/npm" "install" "react-native-canvas@latest" "--save"
npm ERR! node v4.1.0
npm ERR! npm v2.14.3
npm ERR! code 128
npm ERR! Command failed: git rev-list -n1 webview-improvements
npm ERR! fatal: ambiguous argument 'webview-improvements': unknown revision or path not in the working tree.
npm ERR! Use '--' to separate paths from revisions, like this:
npm ERR! 'git <command> [<revision>...] -- [<file>...]'
npm ERR!
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! <https://github.com/npm/npm/issues>
npm ERR! Please include the following file with any support request:
npm ERR! /Users/WellDone2044/Dropbox/Develop/Appy_Bross/test_react-native/camera_test/npm-debug.log
npm -v --> 2.14.3
node -v --> 4.1.0
Is it possible to use an .mp4 (or other video format) source for a canvas, instead of an image file, and output a base64 image from one of it's video frames? Even if it's just the first frame could be useful.
Video manipulation by frames seems to be possible within the original Canvas API
I tried the following which works when LOCAL_FILE_LOCATION is an image file, but doesn't if it's a video file:
handleVideoThumb = async (canvas) => {
console.log('handleVideoThumb called');
const image = new CanvasImage(canvas, 100, 100);
canvas.width = 100;
canvas.height = 100;
const context = canvas.getContext('2d');
image.src = LOCAL_FILE_LOCATION;
image.addEventListener('load', async () => {
console.log('image is loaded');
context.drawImage(image, 0, 0, 100, 100);
const dataURL = await canvas.toDataURL('image/jpeg');
console.log('dataURL: ', dataURL);
});}
$ npm install react-native-canvas@latest --save
npm ERR! git rev-list -n1 webview-improvements: fatal: ambiguous argument 'webview-improvements': unknown revision or path not in the working tree.
npm ERR! git rev-list -n1 webview-improvements: Use '--' to separate paths from revisions, like this:
npm ERR! git rev-list -n1 webview-improvements: 'git <command> [<revision>...] -- [<file>...]'
npm ERR! git rev-list -n1 webview-improvements:
npm ERR! Darwin 15.6.0
Hey, another issue for you. Possibly related to my issue from before but, as the title says, the call to context.getImageData(...) fails after an image file has been drawn to the canvas. This can be recreated in your example project simply by adding the following line after line 41 of app.js
context.drawImage(image, 0, 0, 100, 100); // Existing call to draw image to canvas
context.getImageData(0, 0, 100, 100); // New async call to request the bitmapped data just drawn
By adding the above line of code, I get the following error
"Cannot read property 'constructor' of undefined"
And the stack trace shows the error is being thrown at Canvas.js line 169, where properties of the retrieved data are being read.
If I put that line of code elsewhere in the file, it runs fine. For instance, if I print the value returned from awaiting that call, I can see all of the pixel data of the circle, the path, the gradient, etc. and even if I put the line of code ABOVE the call to context.drawImage(...), it returns fine with a 100x100 grid of blank pixels. It only ever seems to throw the error if I make the call after drawing an image to the canvas. I've also tried setting a timeout on the getImageData call to ensure the image has fully completed drawing.
This issue presents on all my android devices but not iOS.
I'll be happy to be of help if you need more data. Hopefully you can recreate the issue as easily as me
Is it possible to render children elements in <Canvas>
?
I want to render TouchableOpacity over the canvas.
I've tried, but no success, I think it is discarded. Is there any way to do this?
<Canvas ... >
<TouchableOpacity ... >
<Image ... />
</TouchableOpacity>
</Canvas>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.