Question

我有一块画布来处理图像的旋转，但是无法获得希望的结果。

这是结果：

这是我的代码：

I/flutter ( 5721): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter ( 5721): The following assertion was thrown building StreamBuilder<QuerySnapshot>(dirty, state:
I/flutter ( 5721): _StreamBuilderBaseState<QuerySnapshot, AsyncSnapshot<QuerySnapshot>>#bc925):
I/flutter ( 5721): A build function returned null.
I/flutter ( 5721): The offending widget is: StreamBuilder<QuerySnapshot>
I/flutter ( 5721): Build functions must never return null. To return an empty space that causes the building widget to
I/flutter ( 5721): fill available room, return "new Container()". To return an empty space that takes as little room as
I/flutter ( 5721): possible, return "new Container(width: 0.0, height: 0.0)".
I/flutter ( 5721):
I/flutter ( 5721): When the exception was thrown, this was the stack:
I/flutter ( 5721): #0      debugWidgetBuilderValue.<anonymous closure> (package:flutter/src/widgets/debug.dart:270:7)
I/flutter ( 5721): #1      debugWidgetBuilderValue (package:flutter/src/widgets/debug.dart:287:4)
I/flutter ( 5721): #2      ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3742:7)
I/flutter ( 5721): #3      Element.rebuild (package:flutter/src/widgets/framework.dart:3564:5)
I/flutter ( 5721): #4      BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2277:33)
I/flutter ( 5721): #5      _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:700:20)
I/flutter ( 5721): #6      _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:275:5)
I/flutter ( 5721): #7      _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:990:15)
I/flutter ( 5721): #8      _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:930:9)
I/flutter ( 5721): #9      _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:842:5)
I/flutter ( 5721): #13     _invoke (dart:ui/hooks.dart:209:10)
I/flutter ( 5721): #14     _drawFrame (dart:ui/hooks.dart:168:3)
I/flutter ( 5721): (elided 3 frames from package dart:async)
I/flutter ( 5721): ════════════════════════════════════════════════════════════════════════════════════════════════════

function onFileSelected() {
  $(document).on("click", "#rotate_1", function() {
    angle1 += 90;
    rotateImage(document.getElementById('myimage'), angle1);
    $("#myimage").data('base64', document.getElementById('canvas').toDataURL());
    $("#myimage").css('transform', 'rotate(' + angle1 + 'deg)');
  });
};

function rotateImage(img, degree) {

  var canvas = document.getElementById('canvas');

  if (document.getElementById('canvas')) {

    var context = canvas.getContext("2d");

    context.clearRect(0, 0, canvas.width, canvas.height);

    context.save();

    // move to the center of the canvas
    context.translate(img.width / 2, img.height / 2);

    // rotate the canvas to the specified degrees
    context.rotate(degree * Math.PI / 180);

    // draw the image
    // since the context is rotated, the image will be rotated also
    context.drawImage(img, -img.width / 2, -img.width / 2);

    // we’re done with the rotating so restore the unrotated context
    context.restore();

  }

}

我的图片与html和javascript中的画布不符

0 个答案: