添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
  • SDK Version: v40 latest
  • Platforms(Android/iOS/web/all): : Android
  • Add the appropriate “Tag” based on what Expo library you have a question on.
  • Am trying to use expo-2d-context lib in my react native app : GitHub - expo/expo-2d-context: A pure-js implementation of the W3C's Canvas-2D Context API that can be run on either Expo Graphics or WebGL However am unable to draw image on canva using drawImage function nor i can get base64 data via toDataURL function

    so any idea how to draw image and get base64 data from canva.

    sample code

    import { GLView } from 'expo-gl';
    import Expo2DContext from 'expo-2d-context';
    import React from 'react';
    import {Image} from 'react-native';
    export default class App extends React.Component {
        render() {
            return (
              <GLView
                style={{ flex: 1 }}
                onContextCreate={this._onGLContextCreate}
        _onGLContextCreate = (gl) => {
            var ctx = new Expo2DContext(gl);
            ctx.translate(50,200)
            ctx.scale(4,4)
            ctx.fillStyle = "grey";
            ctx.fillRect(20, 40, 100, 100);
            ctx.fillStyle = "white";
            ctx.fillRect(30, 100, 20, 30);
            ctx.fillRect(60, 100, 20, 30);
            ctx.fillRect(90, 100, 20, 30);
            ctx.beginPath();
            ctx.arc(50,70,18,0,2*Math.PI);
            ctx.arc(90,70,18,0,2*Math.PI);
            ctx.fill();
            ctx.fillStyle = "grey";
            ctx.beginPath();
            ctx.arc(50,70,8,0,2*Math.PI);
            ctx.arc(90,70,8,0,2*Math.PI);
            ctx.fill();
            ctx.strokeStyle = "black";
            ctx.beginPath();
            ctx.moveTo(70,40);
            ctx.lineTo(70,30);
            ctx.arc(70,20,10,0.5*Math.PI,2.5*Math.PI);
            ctx.stroke();
            // draw image
          var img = new Image();
          img.onload = () => {
            this.ctx.drawImage(img, 0, 0,  width,  height);
            this.ctx.flush();
            // get base64 image data
            var b64 = gl.toDataURL();
           img.src = "https://miro.medium.com/max/480/1*F6tkVg8eDXITOSA91Mh0kw.png";
                  

    thanks its useful i will give try snapshot of view is enough can be converted to base64 . .
    do you have any idea how to draw image ? using this.ctx.drawImage(img, 0, 0, width, height);

    its so sad they have not made any documentation for this lab , also all examples are of web side in html :frowning: